Фиксирование блока при прокрутке страницы. Если страница прокручена дальше, чем высота родительского контейнера, то данный блок должен остановиться/застопориться.
Скрипт (не забываем подключить 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>