Question

我有一个网页，当用户滚动到某一点时，我希望在该网页上显示一个框。由于此页面是博客，因此这一点需要灵活。

到目前为止，这是我的代码：

    $(document).ready(function(){
      var navoff = $('.navigation').offset();
      $(window).scroll(function(){
          var y = $(window).scrollTop();
          var windowheight = $(window).height();
          var totalheight = navoff.top - (windowheight / 2);

        if(y > totalheight) {
            $('.box').animate({ 'bottom': '0px' });
            }else{
            $('.box').animate({ 'bottom': '-140px' });
            }
});
});

导航是博客文章下面的元素，所以我认为偏移比确定博客内容div何时到达屏幕顶部要好得多。上面的代码工作，框从底部滑出，但有一个巨大的延迟。平均而言，脚本显示该框大约需要五秒钟，而十分之一要将其带走。为何延误？这可以立即制作吗？

Answer 1

您可以使用jQuery插件来执行此操作。

http://kitchen.net-perspective.com/open-source/scroll-follow/

您只需要计算所需的偏移量。

另请看一下这个其他主题： How to make div follow scrolling smoothly with jQuery?

Answer 2

试试这个。我已经从滚动中删除了一些代码，因此每次用户滚动时都不会计算它。

编辑：同时使用建议的去抖方法eduardocereto

 $(document).ready(function(){
     var navoff = $('.navigation').offset().top;
     var windowheight = $(window).height();
     $(window).scroll(function(){
         var y = $(window).scrollTop();
         var totalheight = navoff - (windowheight / 2);

         if(y > totalheight) {
             $('.box').animate({ 'bottom': '0px' });
         }else{
             $('.box').animate({ 'bottom': '-140px' });
         }
     });
});

如何让jquery滚动触发框工作

2 个答案: