Как прикрепить меню навигации кверху при скролле?

Question

[ovsy]

Есть такая страница
Нужно чтобы при скроле вниз он крепился кверху страницы.
Как сделать так на чистом JS, или просто css?
Пробовал position: sticky; не помогает, с fixed все съезжает.
Спасибо заранее за помощь

Comments

[Ankhena]

Вам нужно вытащить блок с меню из контейнера и sticky заработает.
https://codepen.io/AnnaSummer/pen/ZEoOrmY
Только БЭМ классы поправьте дальше.

Логично, чтобы именно <nav> имел класс блока .nav
И если уже использован семантический тег, то нет никакого смысла задавать ему такую же role. Иначе это масло масляное.

Где-то по-быстренькому заменила абсолют на гриды :)

[ovsy]

Ankhena, спасибо за помощь :)

Answer 1

[Mizutsune]

Переместить навигацию из элемента с классом hero в общий контейнер. Сейчас навигация находится в блоке hero и не сможет выйти за его пределы при использовании position: sticky, так как не является прямым дочерним элементом блока, внутри которого и нужна липкая навигация. Рекомендую почитать как на самом деле работает position: sticky.

Ну и вообще, зачем у элемента .container - стоит max-height: 50px? Думаю что надо бы убрать это ограничение.

Comments

[ovsy]

Перенес секцию hero в общий контейнер, но position: sticky все равно не работает, только поле поиска меняет свое расположение

[Mizutsune]

ovsy,

Перенес секцию hero в общий контейнер, но position: sticky все равно не работает

Так у вас секция hero и так находится в общем контейнере, точнее в блоке с классом .container.

В общем у вас такая структура:

.container
   .hero
      .hero__text
      .nav
   section

А должно быть примерно так:

.container
   .hero
      .hero__text
   .nav
   section

Есть кое что ещё. При использовании position: sticky, нужно добавить свойство top, например с нулевым значением, то есть:

.nav {
   position: sticky:
   top: 0;
}

[ovsy]

Mizutsune, спасибо. Завтра попробую