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添加到用于滚动超过60px的div UNTIL。然后如果当用户从底部获得200px时将更改为.affix，它将更改为.affix-bottom到该类。

这个jsfiddle表现得很好：

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

这显示了获得粘滞效果的适当css。

动画div检测它的顶部或底部

1 个答案: