Как сделать фиксированное меню при скороллинге стр?

Question

Gagatyn @Gagatyn

Самоучка

Как сделать фиксированное меню при скороллинге стр?

Здравствуйте. Проблема в том, что когда я сделал фиксированное меню при скролинге до определенного момента стр, весь контент прыгает вверх. Понятно, что меню выбивается из иерархии и контент занимает его место, как сделать так чтобы меню плавно/резко фиксировано скролилось вместе с стр и контент не прыгал?

Вопрос задан более трёх лет назад
962 просмотра

1 комментарий

Подписаться 1 Оценить 1 комментарий

Можно изначально задать хэдеру position fixed, а для body отступ по высоте хэдера. Можно посмотреть реализацию в bootstrap: https://getbootstrap.com/examples/navbar-fixed-top/. Если нужно как в примере, то можно сделать изначально position absolute, и потом при скролле добавлять класс для position fixed.

Answer 1 · 2017-01-02 23:33:49

Создаете модификатор блока .header, например .header--fixed.

.header
  height 60px
  background #000
  &--fixed
     position fixed
     left 0
     top 0

Со стороны JS делаете проверку:

$(window).scroll(function() {
  var container = $('.header');
  var status = $(this).offsetTop >= container.height() ? true : false;

  container.toggleClass('.header--fixed', status);
});

Либо делаете сразу фиксированным .header и создаете отступ у контейнера который оказывается под .header

Как сделать фиксированное меню при скороллинге стр?

Войдите на сайт