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

Question

[Кристина]

Добрый день!
Есть горизонтальное меню, оно идет после header.
Как сделать, чтобы при прокрутке страницы оно было "приклеено" кверху страницы?
Спасибо!

Answer 1

[Ivan Bogachev]

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

Почитать про это можно вот тут. И приучайтесь использовать новые возможности CSS вместо того, чтобы прикручивать целую jQuery и плагин сверху, как тут некоторые советуют.

Comments

[Кристина]

Здорово! Просто супер! Спасибо большое!

Посоветуйте, где можно следить за такими волшебными обновлениями css?

[Ivan Bogachev]

KrisIris: Я в основном узнаю о таких вещах или из статей на css-tricks или из демок на codepen.

[Гарес Антонович]

Ivan Bogachev: отличный совет!
мы до сих пор не используем flex-box из за 2х процентов пользователей на старом ie а вы советуете свойство у которого поддержка по миру 58%
пруф
KrisIris: гуглите js sticky header желательно на jquery в ином случае у вас просто на половине бразуеров это меню не будет работать.

[Ivan Bogachev]

Гарес Антонович: Во-первых не 58, а 70. Во вторых - если эта функциональность является (по какой-то причине) критичной и пользователи ie без нее жить не могут - можно подставить полифилл, который будет в 50 раз меньше jquery и не потребует никаких лишних действий.

[Гарес Антонович]

Ivan Bogachev: если человек задался вопросом как сделать стики хеддер то скорее всего он не знает о префиксах, и в своем ответе вы не написали что на до бы использовать их потому и 58, а то что можна не использовать jquery это верно но все же лучше cros браузерность чем jquery я к сожалению представить не могу

[Ivan Bogachev]

Гарес Антонович: Мне кажется в наше время про префиксы можно отдельно не говорить - у всех должен быть автопрефиксер (кстати по ссылке, которую я дал, есть информация о необходимых префиксах). Да, и не поделитесь, какой IE вы поддерживаете (просто из любопытства - вы говорите, что не используете флексбокс из-за него, я сам делаю все для IE11+ и там он вполне работает).

[Гарес Антонович]

Ivan Bogachev: помимо ie 7-8 стараюсь не забывать о таких вещах как android browser и opera mini - да так выходит крайне редко
но в первую очередь мы делаем проект не что бы нам было проще верстать а что бы он выполнял свою функцию
на этом диалог я думаю можна завершить, так как каждый останется скорее всего при своем мнении

[Froggyweb]

Гарес Антонович: так у оперы мини и с js проблемы будут.

[Кристина]

Ivan Bogachev:
Иван, а если я хочу, чтобы при прокрутке это меню меняло background-color, то уже script нужен?

[Ivan Bogachev]

KrisIris: Да, если фон нужно менять - только скрипты.

Answer 2

[Артур Карапетян]

.menu {
position: fixed;
top: 0;
}

Что в этом такого сложного?!

Comments

[Кристина]

Артур, если я так пропишу, оно сразу будет наверху, а оно должно там оказаться при прокрутке страницы. В статичном положении оно следует за блоком с логотипом.

[Артур Карапетян]

Ок, тогда повесьте функцию - при скролле вешайте класс на меню, а в классе фиксированую позицию

[Артур Карапетян]

KrisIris: Такого в Гугле можно найти немерено

[Кристина]

Спасибо!

[Артур Карапетян]

KrisIris: Эмм.... не за что

Answer 3

[Александр Пеньшин]

www.sutanaryan.com/how-to-create-fixed-menu-when-s...

Answer 4

[Rheinmetall]

Вот грубый пример

Answer 5

[Антон Кирпач]

Простой плагин http://stickyjs.com/