Как закрепить меню при прокрутке страницы сайта

0

Сегодня поведаю вам о том, как закрепить меню сайта при прокрутке страницы. Делается это для того чтобы меню сайта всегда было перед глазами посетителей. В wordpress есть достаточно много плагинов, с помощью которых можно создавать и непосредственно фиксировать меню у верхнего края экрана, однако я не вижу необходимости в таком подходе, так как все делается элементарно с помощью небольшого скрипта. Да и не все делают сайты на wordpress, а мой вариант подойдет кому угодно.

Для начала я объясню что мы с вами сделаем. Для фиксирования меню нужно будет менять класс блока навигации в зависимости от положения страницы. В первом экране у меню будет один класс со своими значениями, при прокрутке страницы, когда меню подойдет к краю экрана ему будет присвоен новый класс со значениями, которые будут фиксировать его вверху экрана.

пример фиксированного меню

Приступим. Для начала хочу предупредить что все что мы будем делать, будет работать с помощью jQuery, соответственно в вашем сайте должна быть подключена эта библиотека.

В первую очередь вам нужно добавить идентификатор для вашего меню, в моем примере я добавил идентификатор wrap

Как видите, по умолчанию моему меню присвоено всего два класса: navbar и navbar-default. Это стандартные bootstrap классы меню.

Теперь подключите следующий скрипт после строки подключения jQuery библиотеки:

После подключения этого скрипта, на странице в которой присутствует меню с идентификатором wrap, при её прокручивании, будет присваиваться класс fix-navbar-top тому элементу у которого есть идентификатор wrap (соответственно наше меню).

Теперь осталось дело за малым, добавить в файл стилей или прописать в hedere стили для класса fix-navbar-top:

Единственный минус этого варианта, ширина меню при фиксированном позиционировании блока, должна быть указана статично. Если ваш сайт имеет «резиновую верстку» на малых экранах меню с шириной 1118px будет смотреться не очень красиво. Но и тут я нашел выход, для каждого из размеров экранов я прописал медиазапросы, которые меняли ширину блока в зависимости от ширины экрана устройства на котором просматривается страница. О медиазапросах я напишу немного позже.

Чтобы посмотреть что получилось, нажмите на кнопку и прокрутите страницу

Пример

Как видите, легко и просто прикреплять меню при прокручивании страницы, если у вас есть другие варианты реализации этой задачи, с удовольствием прочту их в комментариях.

Комментарии:


Присоединяйся к нам