I try to fix a separate element on the page when scrolling the page. I use js code:

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; })

On pages where height is great, effect works well - https://monosnap.com/file/652avLqJnn9onOyWcR9iZdT1DJsFEX

But if the height of a small pinned item constantly jumps up - the page becomes unreadable https://monosnap.com/file/E3PIWU5UL1IrMQBdKAilYUOdhHIoQh (the speed is not visible on the screen, but the page is not readable).

How to fix it?

1 answer 1

When you fix an element, it drops out of the page and the overall height dramatically decreases. Even with a sufficient height, this looks unpleasant. Solution - try to keep the page height. For example, you can put an empty div with the height of this menu in place of the “dropped out” attached menu or add the padding-top or margin-top element to the next menu.