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

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

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

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

Пример