使菜单保持在顶部，但在向下滚动侧滚动网站时不保持答案

【问题标题】：Make menu stay on top but not when scrolling down for side scroll website使菜单保持在顶部，但在向下滚动侧滚动网站时不保持
【发布时间】：2013-02-02 22:58:55
【问题描述】：

我正在开发一个滚动到侧面的网站，我使用固定位置将菜单保持在顶部，但我意识到当我向下滚动时，菜单也会向下滚动。我想知道当我滚动到侧面时是否有办法将菜单保持在顶部，但当我向下滚动时它不会向下滚动。

所以我尝试使用相对于主体的绝对位置，但是当我横向滚动时，这并没有使菜单保持在顶部。

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

第一部分是菜单的 CSS，第二部分是关于如何水平滑动的 jquery 代码，第三部分是菜单的 html。

如果您对我的问题感到困惑，请查看：http://permika-montreal.tk/new.php 当您向下滚动时，您也会看到菜单，我希望不要发生这种情况。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

当用户使用 JavaScript/jQuery 水平滚动时，您可以通过更新 left CSS 属性来完成此操作。

见：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.
}

【讨论】：

谢谢，但是你能给出那个解决方案的 html 代码吗？我不太确定每个 id 对该解决方案的作用
@user977151 看起来只有$(window).scroll 部分是真正相关的。 el 可能是您的#menu。查看我更新的帖子。
顺便说一句，当菜单的位置固定时使用这个？如果我想使用绝对位置，因为移动浏览器有固定问题？
@user977151 位置不应固定，因为您不希望菜单垂直固定。

【解决方案2】：

看这里

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

    }
});   

});

【讨论】：