Фиксирование блока при прокрутке jquery

Фиксирование блока при прокрутке страницы. Если страница прокручена дальше, чем высота родительского контейнера, то данный блок должен остановиться/застопориться.

Скрипт (не забываем подключить JQuery):

block_pos = $('.action_right').offset().top;
// определяем первоначальное положение блока
wrap_pos = $('.wrap').offset().top;
// позиция контейнера
block_height = $('.action_right').outerHeight();
// высота блока
wrap_height = $('.wrap').outerHeight();
// высота контейнера
block_width = $('.action_right').outerWidth(); pos_absolute = wrap_pos + wrap_height - block_height;
// ширина блока
$(window).scroll(function () {     if ($(window).scrollTop() > pos_absolute) {
// Если страницу прокрутили дальше, чем высота родителя минус высота фикс. блока, то стопорим блок
        $('.action_right').css({             'position': 'absolute',             'top': wrap_height - block_height,             'width': block_width         });     }     else if ($(window).scrollTop() > block_pos) {
// Если страницу прокрутили дальше, чем находится наш блок, то мы этот блок фиксируем и отображаем сверху
        $('.action_right').css({             'position': 'fixed',             'top': '0px',             'width': block_width         });     } else {
// Если же позиция скролла меньше (выше), чем наш блок, то возвращаем все назад
        $('.action_right').css({             'position': 'static'         });     } })

Предполагаемая верстка:

<div class="wrap">
      <div class="col-md-9">
            Содержимое левого блока
      </div>
      <div class="col-md-3">
            <div class="action_right">
                  Содержимое фиксируемого блока
            </div>
      </div>
</div>


Copyright ©2022