CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user977151
user977151

Reputation: 505

Make menu stay on top but not when scrolling down for side scroll website

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.

Upvotes: 0

Views: 1509

Answers (2)

Rhymond
Rhymond

Reputation: 110

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);

    }
});   

});

Upvotes: 1

ylysyym
ylysyym

Reputation: 430

You can accomplish this by updating the left CSS property whenever the user scrolls horizontally using JavaScript/jQuery.

See: https://stackoverflow.com/a/9423822/1718121

$(window).scroll(function(event) {
  var x = $(this).scrollLeft();
  $("#menu").css("left", x + offset); //Change offset to be the default margin-left of your menu.
}

Upvotes: 2

Related Questions