Сегодня мы фиксируем меню при прокрутке страницы, рассмотрим лучший вариант реализации.
Как мы фиксируем меню?Есть 2 способа фиксировать меню:
- Фиксировать меню только если страница прокрутилась достаточно вниз
- Фиксировать меню постоянно
Для этого способа потребуется JS и CSS. Сначала нам потребуется определить насколько сильно страница прокрутилась вниз, а затем, если это значение больше определенного (например больше размера экрана) зафиксируем меню. Рассмотрим на примере:
$(window).scroll(function(){ var docscroll=$(document).scrollTop(); if(docscroll>$(window).height()){ $("nav").css({"height": $("nav").height(),"width": $("nav").width()}).addClass("fixed"); }else{ $("nav").removeClass("fixed"); } });
То есть при прокрутке страницы мы проверяем «больше ли величина прокрутки страницы, чем высота окна», и если больше - добавляем класс fixed к нашему меню (и указываем высоту и ширину, потому, что при использовании position: fixed теряются размеры блока), в противном случае - удаляем этот класс.
Fixed{ position: fixed; top:0; left: 0; }
То, есть при наличии такого класа объект станет фиксированным.
Готово. Меню будет фиксироваться только тогда, когда пользователь прокрутит страницу больше, чем на размер экрана. Конечно можно сделать фиксацию меню после того, как пользователь прокрутит страницу на величину самого меню, или на какое-то заране заданное значение.
Фиксируем меню всегда (второй вариант фиксации)Для этого способа нам просто понадобиться CSS. Мы навсегда зафиксируем меню, и при желании сделаем верхний отступ у body, чтобы при нулевой прокрутке меню не наезжало на остальной контент.
ЗадачаЗадать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.
Решение«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed . При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left , right , top и bottom , которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).
Пример 1. Использование position
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фиксированное меню .menu { position: fixed; /* Фиксированное положение */ right: 10px; /* Расстояние от правого края окна браузера */ top: 20%; /* Расстояние сверху */ padding: 10px; /* Поля вокруг текста */ background: #ffe; /* Цвет фона */ border: 1px solid #333; /* Параметры рамки */ } .text { height: 1000px; } Меню
Результат данного примера показан на рис. 1. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.
Если верхняя панель навигации или просто меню (это одно и тоже), исчезает с поля зрения, при прокрутке странице, то перед вами точно не фиксированное меню.
Фиксированное меню , не следует вниз за прокруткой, а всегда остается наверху страницы. Это очень удобно для пользователя, у него всегда есть возможность, быстро перейти к другому разделу вашего сайта, не крутя колесико мышки.
Демонстрация .Тем не менее при очевидных преимуществах наличия фиксированного меню , на каждом втором сайте, меню не зафиксированное. Может это не просто сделать, требует умений программирования на JavaScript ? Сейчас мы это выясним.
Как всегда начнем с HTML разметкиСоздадим блок див с классом nav , внутри которого три ссылки на разделы сайта – это и есть наше меню.
Главная
Новости
Контакт
Создадим второй блок с каким-то текстом – это контент нашего сайта.
Фиксированное верхнее меню
Какой-то текст какой-то текст какой-то текст..
Добавим CSS
Теперь подходим к ключевому моменту, меню еще не закреплено. Вы увидите, насколько просто сделать верхнее фиксированное меню . Поскольку данный способ работает только в том случае, когда меню находится над шапкой сайта.
Nav {
width: 100%;
position: fixed;
top: 0;
background-color: #c2185b;
}
Nav a {
float: left;
padding: 12px 14px;
display: block;
color: #fff;
font-size: 18px;
}
Поменяем цвет при наведении.
Nav a:hover {
color: #000;
background: #f8bbd0;
}
Внимательный читатель возможно заметил, что теперь меню перекрыло верхнюю часть текста, расположенного в блоке ниже. Нам надо сдвинуть блок с контентом ниже, на высоту самого меню, примерно на 35 пикселей.
Main {
padding: 14px;
margin-top: 35px;
height: 1200px;
}
Нужно буквально поменять два слова. Вместо top , прописываем bottom: 0 , и соответственно вместо margin-top , пишем margin-botom: 35px .
Итак, выяснилось, что сделать фиксированное меню очень просто, даже начинающему веб-разработчику. У меня остается только две версии, почему не все это делают:
Просто не задумываются об удобстве пользователя, а заказчик видимо тоже не слишком глубоко продумывает технические детали сайта.
Либо меню находится под шапкой сайта, а здесь нужен другой подход.
Фиксация меню под шапкойКак зафиксировать меню под шапкой?
Я знаю два простых способа, как это сделать.
1) Поместите шапку и меню в общий div и примените position: fixed и top: 0 к этому блоку. Таким образом, шапка вместе с меню закрепятся наверху страницы.
2) При помощи скрипта и библиотеки jQuery , когда у верхней границы браузера зафиксируется только меню без шапки. Перед закрытием тега head , вставьте ссылку на библиотеку.
Вставьте небольшой скрипт перед закрывающим тегом body .
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 100) $(".nav").css({top: "0", position: "relative"});
else $(".nav").css({top: "0", position: "fixed"});
});
});
Замените 100 (высота шапки) на ваше значение, а также название класса nav , на ваш класс или идентификатор. Теперь при прокрутке, вы будете видеть зафиксированным только меню без шапки.
Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта:)
Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.
Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, .
От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.
Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px . Запомним это число)
#header { height: 180px; } #navigation{ background: #EF0505; height: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px; position: relative; top: 140px; } #navigation.fixed{ position: fixed; top: 0; width: 100%; background: rgba(239, 5, 5, 0.95); } #navigation ul{ width: 1180px; padding-left: 0; margin: 0 auto; display: block; } #menu li{ float: left; list-style: none; padding: 0 25px; border-right: 1px solid #D60000; } #menu a { color: #fff; text-decoration: none; font-family: Verdana; } #menu>li a:hover{ color: #656565; transition: color 0.5s ease; }
И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.
JQuery(function($) { $(window).scroll(function(){ if($(this).scrollTop()>140){ $("#navigation").addClass("fixed"); } else if ($(this).scrollTop()
можно подключить локально или через google.
Для локального подключения необходимо скачать файл jQuery с официального сайта http://jquery.com/
CSS
JavaScript
В скрипте создаем 2 переменные в которые сохраняем значения высоты шапки и отступа блока с меню сверху. Отступ может отсутствовать (как в данном случае). Затем пишем обработчик на событие onScroll объекта window. В нем с помощью метода scrollTop() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.
На этом все, благодаря простым решениям можно добиться красивого фиксированного меню которая не будет прослистываться при прокрутке основной части сайта