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

时间:2016-05-05 03:35:10

标签: javascript jquery html css

当滚动时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});

          }
        });
   }
});

1 个答案:

答案 0 :(得分:0)

您可以使用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。