@lagudal

Fixed header. Как убрать дергание на страницах с малой высотой?

Из определенных соображений необходимо использовать 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
Как проще всего или лучше всего пофиксить?
  • Вопрос задан
  • 906 просмотров
Решения вопроса 1
@Eugeny1987
Работаю с HostCMS
Когда закрепляете шапку добавляйте padding-top странице
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы