滑动/跟随导航菜单

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。