Когда я использую код ниже, при прокрутке боковая панель мигает взад и вперед. тестирование показало, что это происходит из-за того, что условие winTop >= (contentTop - header.height())
не выполняется при каждой другой итерации прокрутки.
Идея состоит в том, что на странице есть боковая панель, которая прилипает к прокрутке до тех пор, пока не достигнет нижнего колонтитула, затем она позиционируется абсолютно в нижней части контейнера до прокрутки назад.
Он делает все правильно, за исключением того, что условие завершается неудачей при каждом "щелчке" колеса прокрутки, вызывая сильное мигание боковой панели.
Вот живой пример: http://www -icoachfirst-com.sandbox.hs-sites.com / test-lptest-lp
JQuery:
var $window = $(window),
header = $('.header'),
sidebar = $('#sidebar'),
content = $('#content'),
container = $('.floattrap'),
footer = $('.footer_main');
$(window).on('load scroll resize', function(){
var contentTop = sidebar.offset().top,
winTop = $(window).scrollTop(),
footerTop = footer.offset().top;
console.log(winTop);
if (winTop >= (contentTop - header.height())) {
if (footerTop <= (winTop + $window.height())) {
sidebar.removeClass('stuck');
sidebar.addClass('bot');
console.log(true);
} else {
sidebar.removeClass('bot');
sidebar.addClass('stuck');
$('.stuck').css({
'top': (header.outerHeight(true) + 20),
'left': (content.offset().left + content.width()),
'right': (container.offset().left + container.width())
});
console.log(false);
}
} else {
console.log('fail');
sidebar.removeClass('stuck');
sidebar.removeClass('bot');
}
});