0

我一直在努力解决问题，但似乎找不到一些帮助。

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

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

1) 当您向下滚动页面时。我希望 Sticky Nav 在页面上的特定位置（第 3 章）（禁用、丢弃、停止），并且用户应该能够继续向下滚动。

2）当用户向上滚动时，代码会将nav向后粘并向上携带，直到nav到达顶部的原始位置。

下面是一个起点。

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

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

使用禁用、销毁、启用选项会很好。

这是清理的原始体验：http: //fiddle.jshell.net/DQgkE/1/show/

我在这里先向您的帮助表示感谢。

4

2 回答 2

1

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

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

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

于 2013-04-09T17:01:39.893 回答
0

我会推荐使用 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
          }
      });
    });

我真的希望我能帮上忙！

于 2016-09-16T21:27:30.470 回答