Как сделать чтобы меню сайта двигалось вместе с прокруткой
Добавил пользователь Дмитрий К. Обновлено: 28.09.2024
Как закрепить панель навигации в верхней части страницы только с помощью CSS и не скроллить её вместе с контентом.
Долгое время для фиксации панели навигации требовалось использовать JavaScript, чтобы определить, когда при прокрутке страницы ей нужно добавить CSS-класс для переключения в position: absolute .
Чтобы получить аналогичный эффект, можно использовать только простое CSS-свойство.
position: sticky
Свойство position: sticky укажет браузеру, что следует позволить элементу прокручиваться вместе с остальной частью документа, пока он не достигнет верхней части страницы. Как только это произойдет, позиция элемента фиксируется, а остальные элементы на странице прокручиваются за ним.
На первый взгляд всё работает нормально. Но, если приглядеться, клик по ссылке в навигации скроллит контент так, что заголовок секции самым бесстыдным образом оказывается под зафиксировавшейся панелью с навигацией. Это поправимо.
scroll-margin-top
Свойство scroll-margin-top укажет браузеру высоту отступа, которую он должен использовать при скролле к контейнеру. Это свойство следует указывать элементам с якорями, на которые ведут ссылки из панели навигации.
Добавим контейнерам свойство scroll-margin-top и присвоим ему значение 1em . Теперь, когда браузер перейдёт по ссылке к якорю, он оставит сверху отступ 1em .
И ещё: этот отступ применяется только к прокрутке. Сам элемент-контейнер по-прежнему сохраняет свои обычные отступы в контексте документа.
HTML-код примера фиксирующейся при прокрутке панели навигации
CSS-код примера фиксирующейся панели скролл-навигации
Пара слов о поддержке position: sticky и scroll-margin-top браузерами
Свойство position: sticky работает во всех современных браузерах, но на момент написания этой заметки не работает с элементами thead и tr в Chrome и Edge (хотя оно работает с th ), а также table в Firefox.
Свойство scroll-margin-top работает во всех современных браузерах.
Оба CSS свойства не работают в маргинальном IE-11 и более старых версиях IE.
Существует много различных плагинов, чтобы "залепить" блок на месте, когда страница прокручивается вниз. И некоторые из них, мягко говоря, ужасные и дергают страницу вверх в момент, когда блок меняет свою позицию на фиксированную.
"Залипание" блока можно сделать гораздо проще, воспользовавшись небольшим скриптом на jQuery или всего одним свойством на CSS
Вариант на CSS (position: sticky):
Для фиксации блока таким способом достаточно просто добавить нужному элементу свойство position: sticky
Такой элемент будет рассматриваться как относительно позиционированный до тех пор, пока родительский контейнер не пересечет указанный порог, в котором он прокручивается, после чего он обрабатывается как фиксированный до тех пор, пока не встретит противоположный край содержащего его блока. Другими словами этот элемент остается ограниченным родительским контейнером, в котором он находится.
После публикации моего отчёта о смене шаблона, в комментариях от вас поступила просьба рассказать, как сделано меню моего обновленного блога. По правде говоря, вся шапка и меню в ней реализованы средствами самой темы оформления. Я ни приложил для этого не единого усилия.
Создать подобное меню довольно легко. Весь секрет заключается в трёх строчках CSS кода.
Как создать фиксированное меню с помощью CSS стилей
Для начала нужно объяснить, как должна быть организована структура страницы (html – каркас). Тут важно понимать, что фиксированное меню на основе CSS стилей можно реализовать при условии, что меню расположено вверху страницы. В таком случае при прокрутке оно будет неизменно оставаться на своём месте. Если же меню хоть на несколько пикселей смещено вниз или размещено под шапкой, то способ с css-стилями уже не подойдёт.
Допустим, меню расположено под шапкой, которая имеет высоту 150 рх. Тогда если зафиксировать меню, при прокрутке оно будет отступать от верхнего края окна на 150 рх. А это будет выглядеть крайне нелепо.
Вот как должна быть организована html структура страницы, для создания фиксированного меню на основе css-стилей.
Схема, конечно, упрощённая. Здесь, всё внимание нужно обратить на расположение меню. В первом варианте, меню расположено в самом верху. Во втором варианте, меню расположено внутри шапки.
Безусловно, многое зависит от общего дизайна сайта, но и в первом, и во втором варианте можно организовать фиксацию меню с помощью css-стилей. Только вот во втором варианте, фиксацию придётся сделать для всей шапки. Это зависит от дизайна.
Следующий важный момент, который вы должны знать и понимать, — все элементы веб-дизайна заключены в отдельные блоки. Это называется — блочная вёрстка. Так вот, меню тоже будет располагаться в отдельном блоке. Для того чтобы каждый блок приобрёл нужный вид (дизайн) им присваивают идентификаторы ( id ) и классы ( class ). И через эти id и class задают css-стили.
Исходный код меню, созданного вручную, будет выглядеть примерно так:
В системах управления контентом, в том числе и WordPress меню будет создано через php. И выглядеть будет примерно так:
Примечание: если в вашей теме WordPress можно создать, только, одно меню, вы, можете использовать ручной способ для создания недостающего меню.
Обратите внимание, блок ДИВ с идентификатором fixmenu присутствует и в одном и в другом варианте.
Именно к этому блоку, через идентификатор fixmenu нужно присвоить стили css. В вашем случае имя идентификатора или класса будет другим. Поэтому вы будете применять, слили именно к вашим идентификаторам и классам.
Как узнать идентификатор или класс меню
Внизу окна браузера откроется панель разработчика, в которой можно посмотреть идентификатор или класс меню.
Присвоение css-стилей
В таблицу стилей нужно вставить вот эти стили:
Вот так организовано меню в моём новом шаблоне. Только фиксация применена ко всему блоку с шапкой, в которой находится логотип, социальные профили, описание сайта и меню.
Как создать фиксированное меню с помощью jQuery
А теперь давайте разберём вариант создания фиксированного меню, когда оно расположено под шапкой. Такие варианты шаблонов наиболее часто используются.
Здесь обычной фиксацией уже не обойтись. Потребуется небольшой скриптик, который будет фиксировать меню у верхней границы браузера.
Проверка и подключение библиотеки jQuery
Чтобы реализовать такое меню у вас должна быть подключена библиотека jQuery. Прежде чем приступить к подключению библиотеки, нужно проверить, может, она уже подключена в вашем шаблоне.
Для этого откройте исходный код сайта. Сделать это можно комбинацией клавиш CTRL+U. И поищите в нём, между тегами … , строчки кода в которых упоминается jquery.min.js или jquery.js .
Если таких строк вы не нашли, то перед закрытием тега ХЕД вставьте вот этот код:
Подключение скрипта – обработчика (меню без изменений прилипает к верхнему краю)
Скрипт вы можете подключить вставкой непосредственно всего кода скрипта в исходный код страницы вашего шаблона. Или можете сохранить скрипт в виде отдельного файла и сделать подключение путём указания пути к нему.
Задача зафиксировать меню сверху страницы при скролле вниз.
Во вторых сделаем сриптом плавное перемещение между секциями сайта.
Начнем с создания каркаса в html разметке.
Добавим тег nav для меню с классом top-nav.
Этот класс потом будем добавлять в скрипт фиксации меню.
У меню будут bootstrap классы container и row.
Следующий шаг делаем список с классом list-inline, прочитать про этот класс можно на официальном сайте bootstrap.
Добавляем ссылки на секции сайта и пропишем название каждой секции в элементе списка li.
Сделаем пять секций с идентификаторами для проверки фиксированного меню.
Рассмотрим пример, если есть шапка header у сайта высотой height: 100px с изображением на заднем плане style=background-image: url (img/7.jpg) и с тремя колонками для логотипа logo, описания descry сайта и телефона phone.
В этой статье мы пошагово рассмотрим как создать горизонтальное меню с прокруткой и добавить к нему несколько улучшений, которые позволят отображать активный элемент по центру и прокручивать меню с помощью удерживания кнопки мыши.
Горизонтальное меню с прокруткой выполним на чистом CSS. JavaScript будем использовать только для добавления к нему различных улучшений.
Создание разметки
Вид горизонтального меню с прокруткой без стилей:
Написание CSS кода меню
1. Зададим стили для .nav-scroller , .nav-scroller__items и .nav-scroller__item :
Список используемых свойств:
На этом этапе меню будет иметь следующий вид:
2. Добавим правую границу ко всем элементам кроме последнего:
3. Выделим другим цветом фона активный пункт меню:
Указание активного пункта меню будем выполнять посредством добавления к нему класса nav-scroller__item_active .
4. Добавим стили, которые будут изменять фон пункта меню при наведении на него курсора:
Вот так довольно просто можно создать меню с горизонтальной прокруткой.
Горизонтальная прокрутка будет появляться только тогда, когда пункты не будут помещаться в контейнер. Перемещение по меню в этом случае будет осуществляться посредством бегунка полосы прокрутки или смахиванием (свайпом влево или вправо) на сенсорных устройствах.
Улучшения для меню с горизонтальной прокруткой
1. Выравнивание активного пункта по центру
Для того чтобы при открытии страницы пункт активного меню отображался по центру можно написать небольшой код на JavaScript:
Этот скрипт после готовности DOM дерева будет автоматически прокручивать меню так, чтобы элемент с классом nav-scroller__item_active оказывался если это возможно по центру.
2. Прокручивания меню с помощью удерживания кнопки мыши
Читайте также: