滑动/跟随导航菜单

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 。