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

Приветствую вас, читатели этого блога. Сегодня я хочу рассказать, как зафиксировать меню при прокрутке страницы вниз, чтобы оно всегда было на виду. Такое поведение реализовано на многих сайтах. Давайте и мы попробуем разобраться, как это работает. Я покажу два способа фиксации: на чистом css (с некоторыми условностями) и с помощью jQuery.

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

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

<nav id = "menu">
        <a href = "#">HTML</a>
        <a href = "#">CSS</a>
        <a href = "#">PHP</a>
        <a href = "#">Bootstrap</a>
        <a href = "#">JavaScript</a>
</nav>

Я по-быстрому сделал разметку. Как видите, я даже не стал использовать список и просто так перечислил ссылки в контейнере nav. А это стили:

Обычно фиксированное меню тянется на всю ширину страницы. Мы тоже так сделаем. Соответственно, поскольку пунктов меню 5, то ширина каждого пусть будет по 20%, тогда они займут полностью всю ширину окна.

МЫ прописываем ссылкам блочно-строчный тип, даем градиент, центровку текста, отрицательный внешний отступ (потому что при inline-block автоматически создает отступ справа). Все это не очень важно для работоспособности, просто по минимуму оформим меню. У меня оно выглядит так:

Все, теперь чтобы сделать его фиксированным, достаточно добавить такие свойства:

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

Фиксированное меню на css и jquery

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

<script src = "jquery-2.1.4.min.js"></script>
<script src = "script.js"></script>

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

<nav id = "menu" class = "normal">

Суть в том, что мы в jquery при определенном событии будем переключать классы. Вот такие стили:

То есть normal это просто наше меню по умолчанию. При таком способе ему не обязательно располагаться в самом верху страницы, оно может находиться где угодно. Класс fix добавляет к меню фиксированное позиционирование и координатами отравляет его в верхний левый край окна. Теперь все готово и осталось написать веб-сценарий, который будет реализовать переключение классов. По умолчанию класса fix нет у нашего меню, он будет добавляться при определенном событии. Вот сам сценарий:

$(document).ready(function(){
var $menu = $(«#menu»);
$(window).scroll(function(){
if ( $(this).scrollTop() > 150 && $menu.hasClass(«normal») ){
$menu.removeClass(«normal»).addClass(«fix»);
} else if($(this).scrollTop() <= 150 && $menu.hasClass("fix")) { $menu.removeClass("fix").addClass("normal"); } }); });

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

Ниже реализовывается и обратное действие – если пользователь прокручивает менее 150 пикселей от самого верха окна, то класс fix должен убираться и ставиться класс по умолчанию.

Теперь определите селектору body высоту в несколько тысяч пикселей, чтобы появился вертикальный скролл и попробуйте прокрутить страницу вниз. Меню будет оставаться вверху. При этом оно будет находиться на своем изначальном положении до того момента, как вы прокрутите вниз 150 пикселей, после чего уже гарантированно отправится в левый верхний угол.

Вот такой прием я сегодня решил вам показать. Пишите в комментарии, если возникнут какие-то вопросы. Также отмечу, что подобным образом вы можете зафиксировать и вертикальное меню, не обязательно только горизонтальное.