Как сделать верхнее меню, что бы оно прокручивалось до верха сайта и там фиксировалось?

Question

[Сергей Кузнецов]

Меню должно находится от верха примерно в 100px. В bootstrap есть класс "navbar-fixed-top", он жестко фиксирует меню сверху. Как сделать, чтобы меню при прокрутке сначала было НЕфиксированное, а соприкоснувшись с верхом, там оставалось, то есть становилось ФИКСИРОВАННЫМ? Спасибо!

Answer 1

[Илья]

При прокрутке страницы сайта (событие scroll) проверять текущую позицию ползунка. Если страница прокручена более, чем на 100px, присваивать контейнеру меню необходимый Bootstrap-класс, если менее -- удалять соответствующий класс.
Учесть: при фиксации меню необходимо создавать на его прежнем месте в теле страницы блок, по размерам совпадающий с меню. Это позволит избежать скачка при удалении меню из привычного потока элементов на странице.
Если не привязываться к Bootstrap, есть плагины, которые позволяют фиксировать меню при прокрутке. Поищите.

Comments

[Сергей Кузнецов]

Спасибо, уже ищу.

[Илья]

Сергей Кузнецов: stickyjs.com

[Сергей Кузнецов]

jasper-blondin: Спасибо! Вот нашёл ещё один StickUp на Гитхабе: lirancohen.github.io/stickUp

Answer 2

[Александр Таратин]

Сделайте меню сразу фиксированным, но контент сдвиньте вниз на высоту меню через css.

Пример как сделать, чтобы якоря при этом корректно работали.
https://jsfiddle.net/QW01_01/4rav53j6/1/

Comments

[Сергей Кузнецов]

В том то и дело, что меню ДОЛЖНО ПЕРЕМЕЩАТЬСЯ (при скролле страницы) вверх и там фиксироваться.

Answer 3

[Сергей Кузнецов]

Всем спасибо!