Пытаюсь зафиксировать отдельный элемент на странице при прокрутке страницы. Использую js код:
var position = 0;
$(window).scroll(function(e) {
var $element = $('.header-st');
var scrollTop = $(this).scrollTop();
if( scrollTop <= 50 ) {
$element.removeClass('hide').removeClass('scrolling');
} else if( scrollTop < position ) {
$element.removeClass('hide');
} else if( scrollTop > position ) {
$element.addClass('scrolling');
if( scrollTop + $(window).height() >= $(document).height() - $element.height() ){
$element.removeClass('hide');
} else if(Math.abs($element.position().top) < $element.height()) {
$element.addClass('hide');
}
}
position = scrollTop;
})
На страницах, где высота большая эффект работает хорошо - https://monosnap.com/file/652avLqJnn9onOyWcR9iZdT1DJsFEX
Но если высота небольшая закрепленный элемент постоянно подпрыгивает - страница становитсч нечитабельна https://monosnap.com/file/E3PIWU5UL1IrMQBdKAilYUOdhHIoQh (на скринкате не видно высокую скорость, но страница не читабельна).
Как это исправить?