Question

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.

So I tried using absolute position relative to body, but that doesn’t keep the menu on top when I side scroll.

#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; 
}

---

$(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);
 }); }); 

---

<div id="menu">
    <ul id="menuFloat">
        <li><a class="nav1" href="#nav1">Home</a></li>
        <li><a class="nav2" href="#nav2">About Us</a></li>
        <li><a class="nav3" href="#nav3">Members</a></li>
        <li><a class="nav4" href="#nav4">Events</a></li>
        <li><a class="nav5" href="#nav5">Media</a></li>
        <li><a class="nav6" href="#nav6">Contact Us</a></li>    
    </ul>
</div>

---

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.

If you’re confused of my problem, check here: http://permika-montreal.tk/new.php
When you scroll down, you’ll see the menu does too and I’d like that not to happen.

Answer 1

Look here

#menu
{   
background          : url(images/banner5.gif) no-repeat;
height              : 60px;
top                 : 20px;
position            : absolute; 
left                : 50px;
}

Jquery

$(document).ready(function(){

 var lastScrollLeft = 0;
$(window).scroll(function() {
    var documentScrollLeft = $(document).scrollLeft();
    if (lastScrollLeft != documentScrollLeft) {
        console.log('scroll x');
        lastScrollLeft = documentScrollLeft;
        $("#menu").css("left", lastScrollLeft+50);

    }
});   

});