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

Question

[Gagatyn]

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

Comments

[dpismenny]

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

Answer 1

[Макар Герасимов]

Создаете модификатор блока .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

Answer 2

[RodgerFox]

2 решения:

1. Сразу фиксированное позиционирование и добавлять отступы у контента или у бади
   
2. Добавляем класс для контента или бади с нужным отступом, либо берем высоту нашего меню и инлайним ксс с нужным паддингом