Question

我一直试图解决问题，似乎无法找到帮助。

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

现在体验有点跳跃和错误 - 但我想要的是

1）向下滚动页面时。我想在页面上的特定位置（第3章）使用Sticky Nav（禁用，删除，停止），用户应该能够继续向下滚动。

2）当用户向上滚动时，代码会将导航器固定并向上移动，直到导航到达顶部的原始位置。

以下是一个起点。

3）目前有点这样做，但滚动回来时有一些巨大的跳跃

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

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

这是原创体验：http://fiddle.jshell.net/DQgkE/1/show/

感谢Advance的帮助。

Answer 1

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

修改我继续修复原始代码。没有waypoint插件的解决方案在评论中。

结果如下： 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
          }
      });
    });

我真的希望我能帮忙！

Jquery Sticky Nav问题

2 个答案: