есть большой хэдэр и контент под ним. когда страница скроллится до нижней границы хэдэра, по высоте он становится меньше и fixed.
<header>шапка</header>
<section>контент</section>
но при скролле возникает проблема с прыжком контента вверх, тк хэдэр был 500px, а теперь 0 (на деле 50px но фиксированный). как я пытаюсь решить
var height = $('header).height();
$(window).scroll(function () {
if ($(this).scrollTop() > height ) {
$('header').addClass('stick');
$('section').css('padding-top', height );
} else {
$('header').removeClass('stick');
$('section').css('padding-top', 0);
}
});
разумеется, эта переменная height при скролле меняется, тк и сам header при скролле меняется. и решение не работает. что я делаю не так? как мне эту переменную получать один раз при загрузке страницы? и чтобы функция скролла получала эту переменную, не меняя ее?
спасибо
