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

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

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

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 - отступ от верхнего края страницы.

Пример