Здравствуйте! Делаю липкий сайдбар внутри блока на jq.
Пример тут
$(function() {
var leftSidebar = $('.i-sidebar'); // Находим левый сайдбар
if (leftSidebar.length) { // Если сайдбар существует
var topOfSidebar = leftSidebar.offset().top; // Вычисляем, где располагается сайдбар относительно верхней части экрана
var stickyHeight = leftSidebar.outerHeight(); // Вычисляем высоту сайдбара
function sidebarScroll() {
var heightOfHead = $('.i-head-top').outerHeight(); // Вычисляем высоту хидера
var limit = $('.i-section').offset().top - stickyHeight; // Разница между высотой блока, который находится ниже блока с сайдбаром и высотой сайдбара
var windowTop = $(window).scrollTop(); // Текущее положение скролла
if (topOfSidebar - heightOfHead < windowTop) {
leftSidebar.removeClass('a-sidebar-static');
leftSidebar.removeClass('bottom');
leftSidebar.addClass('a-sidebar-sticky');
} else {
leftSidebar.removeClass('a-sidebar-sticky');
leftSidebar.removeClass('bottom');
leftSidebar.addClass('a-sidebar-static');
}
if (limit - heightOfHead < windowTop) {
leftSidebar.addClass('bottom');
leftSidebar.removeClass('a-sidebar-sticky');
}
}
}
$(window).on('scroll', sidebarScroll);
});
Когда докручиваю до низа блока сайдбар уходит слегка вниз:
А потом встает обратно в родительский блок. (Особенно это заметно, если медленно скроллить с помощью ползунка) Как избавиться от таких "прыжков"? Что следует добавить/исправить? Спасибо!