Анимация 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

Вы могли бы написать функцию JQuery с помощью Waypoints.

Или более легко (по-моему), но с более высокой полезностью полезной нагрузки используйте Bootstrap affix. В этом случае вы сохраните текущий CSS, но затем добавить некоторые свойства Bootstrap в DIV, в вашем случае:

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

Это добавит классы .affix-топ на DIV до тех пор, прокрутке мимо 60px. Затем, если изменится на .affix, когда пользователь получит 200 пикселей со дна, он изменится на .affix-bottom для класса.

Это jsfiddle показывает, что он довольно хорошо:

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

Это показывает соответствующий CSS, чтобы получить липкий эффект.