Из определенных соображений необходимо использовать js решение для фиксирования хидера - так для информации, что в данном случае position:sticky не подходит.
Вот страница с реализацией. Фиксируется после определенной прокрутки хидер и навигация, и кроме этого уменьшаются их высоты.
Вот код js
$(window).scroll(() => {
if($(window).scrollTop() > 33 ){
$("#fix-on-scroll-header").addClass('sticky-header');
$("#navigation").addClass('sticky-nav');
}
else {
$("#fix-on-scroll-header").removeClass('sticky-header');
$("#navigation").removeClass('sticky-nav');
}
});
Но
вот что происходит, если на странице мало информации, т.е. высота страницы такова, что после уменьшения высот хидера и навигации общая высота документа становится меньше высоты окна просмотра.
Как видно, все начинает дергаться, т.к. как только высоты хидера и нави уменьшились, пропадает и вертикальный скроллинг, и тогда удаляется класс с position: fixed
Как проще всего или лучше всего пофиксить?
