Jquery Sticky Nav问题

Question

我一直在想办法解决这个问题，但似乎找不到帮助。

http://fiddle.jshell.net/DQgkE/7/show/

现在的体验有点不稳定--但我喜欢的是

1)当您向下滚动页面时。我希望粘性导航(禁用，放弃，停止)在页面上的特定位置(第-3章)，用户应该有能力继续向下滚动。

2)当用户向上滚动时，代码会将导航向后粘贴并向上移动，直到导航到达顶部的原始位置。

下面是一个起点。

3)目前是这样做的，但当向上滚动时会有一些巨大的跳跃

http://imakewebthings.com/jquery-waypoints/#doc-disable

使用disable，destroy，enable选项会更好。

这是一个全新的体验：http://fiddle.jshell.net/DQgkE/1/show/

提前感谢您的帮助。

Answer 1

我不确定你使用的这个插件是如何工作的，但我有一个我前段时间用jquery写的解决方案。它在顶部有几个变量，你想要粘性的项目，你想要它停止的项目，以及当它变得粘性和填充时在顶部和底部添加的类。我只修改了这个fork中的javascript部分。

编辑我继续并修复了原始代码。没有路点插件的解决方案在评论中。

下面是结果：http://fiddle.jshell.net/Taks7/show/

Answer 2

我推荐使用jQuery (这是个惊喜，对吧？！:P)

    $(document).ready(function() {        //when document is ready
      var topDist = $("nav").position();  //save the position of your navbar !Don't create that variable inside the scroll function!
      $(document).scroll(function () {    //every time users scrolls the page
        var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
        if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
          $('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
          } else {                          //window is on top position, reaches trigger position from bottom-to-top scrolling
              $('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
          }
      });
    });

我真的希望我能帮上忙！