У меня есть определенная проблема при создании липкого заголовка с jQuery. Я пробовал широко используемые фрагменты по сети, но везде я видел ту же самую ошибку.
На определенной высоте документа (прокручивается до чуть большего, чем вызов липкого эффекта) липкий заголовок перескакивает между position: fixed
и position: static
.
HTML:
<header>
<div id="not-sticky"></div>
<div id="sticky"></div>
</header>
<div id="content"> ...
JQuery
var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
windowTop = $(window).scrollTop();
if (windowTop > stickyTop) {
$sticky.css({
position: 'fixed',
top: 0
});
}
else {
$sticky.css({
position: '',
top: ''
});
}
});
CSS
header {
width: 100%;
}
#not-sticky {
padding: 50px 0;
width: 100%;
}
#sticky {
padding: 24px 0;
position: relative;
width: 100%;
z-index: 25;
}
Я также попробовал margin-bottom на #not-sticky
с той же высотой, что и #sticky
, чтобы сохранить постоянную высоту документа, но произошел тот же самый эффект перекоса.
Любая идея исправить эту вещь?