title: Make menu stay on top but not when scrolling down for side scroll website
body: <p>I'm developing a website that scrolls to the side and I was using fixed position to keep menu on top, but I realize when I scroll down, the menu will also scroll down. I'm wondering if there's a way to keep the menu on top when I scroll to the side, but it doesn't go down when I scroll down.</p>
  
  <p>So I tried using absolute position relative to body, but that doesn't keep the menu on top when I side scroll. </p>
  
  <pre><code>#menu
  {   
  background          : url(images/banner5.gif) no-repeat;
  height              : 60px;
  margin-top          : 20px;
  position            : absolute; 
  left                : 450px;
  }
  
  #menuFloat li
  {   
  display             : inline;
  float               : left; 
  padding             : 8px 20px 0px 30px;
  }
  
  #menuFloat li a
  {   
      color               : #9d0c10;
      font-family         : Erato;
      font-size           : 12pt;
      font-style          : italic;
      text-decoration     : none; 
  }
  </code></pre>
  
  <hr>
  
  <pre><code>$(document).ready(function() {
   $("#menuFloat a").bind("click",function(event){ event.preventDefault();
    var target = $(this).attr("href");
     $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop:    $(target).offset().top }, 1200);
   }); }); 
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;ul id="menuFloat"&gt;
          &lt;li&gt;&lt;a class="nav1" href="#nav1"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav2" href="#nav2"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav3" href="#nav3"&gt;Members&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav4" href="#nav4"&gt;Events&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav5" href="#nav5"&gt;Media&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav6" href="#nav6"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;    
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>The first part is the CSS for the menu, second part is jquery code for how it can slide horizontally, and third part is html for the menu. </p>
  
  <p>If you're confused of my problem, check here: <a href="http://permika-montreal.tk/new.php" rel="nofollow">http://permika-montreal.tk/new.php</a>
  When you scroll down, you'll see the menu does too and I'd like that not to happen.</p>