滑动/关注导航菜单

Question

我正在寻找一个简单的jQuery或Javascript解决方案，以便在用户向下滚动页面时平滑地跟随导航边栏。 这里的东西：http://ucon-acrobatics.com/shop/

任何想法，赞赏。

Answer 1

首先拿到榜首的位置：

offset_top = $("#menu").offset().top  // absolute 
position_top = $("#menu").position().top // relative to parent 

然后创建一个事件：

$(window).scroll(function() { 
    if($(this).scrollTop() >= offset_top) { 
    $("#menu").css("top", $(this).scrollTop() - position_top); 
    } 
}); 

参见我的例子：http://jsfiddle.net/elektronikLexikon/LaVmG/

或更改animate链接在第二版：http://jsfiddle.net/elektronikLexikon/LaVmG/2/

Answer 2

最简单的方法是在导航上使用position:fixed，这样做的好处是不会太滞后。

您可能决定使用position:absolute，直到用户滚动经过某个点后才转到position:fixed。