javascript - 动画 div 检测其顶部或底部

Question

我希望我的 div 在滚动时当该 div 几乎一半时动画。我该怎么做？它不在固定的 div 上，但它就像粘性侧边栏就像在这个网站上sample

这是我的代码

$(function(){ // document ready
   if ($('.filter-container').length) { // make sure ".filter-container" element exists
      var el = $('.filter-container');
      var stickyTop = $('.filter-container').offset().top; // returns number
      var stickyHeight = $('.filter-container').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 100;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0, width: 280 });

          }
          else {
             el.css({ position: 'static', width: 280 });

          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});

          }
        });
   }
});

Answer 1

您可以使用 Waypoints 编写 jQuery 函数.

或者更容易(在我看来)但有效负载成本更高，使用 Bootstrap 词缀。在这种情况下，您保留当前的 ​​css，但然后根据您的情况向 div 添加一些 Bootstrap 属性:

<div class="filter-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">

这会将 .affix-top 类添加到 div 中，直到用户滚动超过 60px。然后，当用户距离底部 200px 时，if 将更改为 .affix，它将更改为 .affix-bottom 到类中。

这个 jsfiddle 很好地展示了这一点:

http://jsfiddle.net/skelly/df8tb/

这显示了获得粘性效果的适当 CSS。