Javascript

Фиксирование блока при прокрутке 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>

Возврат к списку

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Карусель работ

Рандом новостей