Фиксированный плавающий блок при скролле

Иногда требуется сделать так, чтобы при прокрутке страницы определенный блок плавал вместе с прокруткой контента.

Самое простое решение - устанавливаем отступ сверху блока равный прокрутке.

1. Подключить jQuery

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   

2. Вставить следующий скрипт

   $ (document).ready(function () { 
      var el = $ ('.fixed');
      var topPadding = 0;
      var offset = el.offset();
      $ (window).scroll(function() { 
           if ($ (window).scrollTop() > offset.top) { 
               el.stop().animate({ 
                   marginTop: $ (window).scrollTop() - offset.top + topPadding
               } );
           } else{ 
               el.stop().animate({ 
                   marginTop: 0
               } );
           } 
      } );
   } );
   

   el - плавающий элемент.

   topPadding - отступ от верхнего края страницы.

Пример