Фиксированное верхнее меню и плавающий сайдбар в WordPress. Фиксированное меню на JQuery Фиксированное боковое меню при прокрутке страницы

При создании сайта часто возникает необходимость держать в поле зрения горизонтальное меню, в котором расположена основная навигация сайта. Метод «фиксации» горизонтального меню является удобным с точки зрения посетителя, у которого «навигация всегда под рукой», сколько не крути колёсиком вниз или вверх.

Фиксируем горизонтальное меню с CSS: position:fixed

С одной стороны всё просто и легко решается средствами css в два счёта. Пример HTML вёрстки фиксированного горизонтального меню:

  • Главная
  • Новости
  • Контакты
  • Поиск
[содержимое страницы] [подвал сайта]

CSS вёрстка фиксированного горизонтального меню:

# menu-top-almost-fixed{ position: fixed; top: 10px; left: 0; height: 30px; width: 100%; margin: 0; }

А теперь зададим отступ для содержимого страницы, равный высоте меню:

#content { margin-top: 30px; }

И вот у нас «почти» всё получилось. Меню у посетителя «всегда на виду». Но что же делать, если у нас в дизайне расположена шапка сайта, после которой следует само меню, а в шапке у нас логотип, девиз сайта, баннеры.

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

Фиксируем горизонтальное меню при помощи javascript

Итак, рассмотрим вариант, когда меню «идёт» за шапкой сайта, но если посетитель активно прокручивает вниз, меню «фиксируется» вверху и остаётся на месте. Шапка сайта при этом не видна. Если же посетитель возвращается к шапке страницы, меню «становится» на своё место «за шапкой сайта». Для начала привёдем полную HTML вёрстку примера макета страницы:

Логотип сайта Слоган сайта Баннер

  • Главная
  • Новости
  • Контакты
  • Поиск
[содержимое страницы] [подвал сайта]

Шаблон нашего сайта состоит из нескольких типичных областей:

  • шапки сайта – #header , высотой 150px
  • горизонтального меню – #menu-top-almost-fixed – высотой 30px,
  • основной информационной области страницы – #content ,
  • подвала сайта – #footer .

Приведём css вёрстку:

#menu-top-almost-fixed{ position: fixed; margin: 0; left: 0; top: 150px; height: 30px; } #header{ display: block; height: 150px; overflow: hidden; position: relative; margin-bottom: 55px; } #menu-top-almost-fixed ul, #menu-top-almost-fixed li{ list-style: none; margin: 0; padding: 0; } #menu-top-almost-fixed ul{ display: block; text-align: center; width: 100%; float: left; } #menu-top-almost-fixed ul li{ display: inline; line-height: 30px; width: 120px; padding: 0 5px; text-align: center; }

Для начала зададим отступ от шапки до содержимого, равный высоте нашего меню + небольшой отступ с запасом для эстетической красоты. #header { margin-bottom: 55px; } . Зафиксируем наше меню сразу за шапкой: #menu-top-almost-fixed{ position: fixed; margin: 0; left: 0; top: 150px; height: 30px; } .

А теперь позаботимся о том, чтобы при прокрутке меню «фиксировалось» точно вверху страницы. Поместим следующий javascript между и :

Javascript:

var m1 = 150; /* высота шапки в пикселях */ var m2 = 2; /* отступ, когда во время прокрутки шапка уже не видна */ var menuID = "menu-top-almost-fixed"; /* id горизонтального меню для закрепления */ var menuOpacityOnChange = "0.7"; /* прозрачность меню при скроллинге: 1 - непрозрачное, 0.5 - полупрозрачное 0.0 - полностью прозрачное*/ var menuOpacityOnChangeIE = menuOpacityOnChange * 100; /* функция кроссбраузерного определения отступа от верха документа к текущей позиции скроллера прокрутки */ function getScrollTop() { var scrOfY = 0; if(typeof(window.pageYOffset) == "number") { //Netscape compliant scrOfY = window.pageYOffset; } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { //DOM compliant scrOfY = document.body.scrollTop; } else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { //IE6 Strict scrOfY = document.documentElement.scrollTop; } return scrOfY; } /* функция, которая устанавливает верхний отступ для «плавающего» фиксированного горизонтального меню в зависимости от положения скроллера и видимости шапки */ function marginMenuTop() { var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undefined" && s){ if (top+m2 < m1) { s.style.top = (m1-top) + "px"; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.opacity = "1"; } else { s.style.top = m2 + "px"; s.style.opacity = menuOpacityOnChange; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

А пример реализации Вы можете посмотреть по этой ссылке, и воспользовавшись колёсиком прокрутки. Итак, здесь всё просто. В настройках мы передаём скрипту следующие параметры:

  • var m1 = 150; - высота шапки в пикселях,
  • var m2 = 2; - отступ, когда во время прокрутки шапка уже не видна,
  • var menuID = “menu-top-almost-fixed”; - id горизонтального меню для закрепления,
  • var menuOpacityOnChange = “0.7”; - прозрачность меню при скроллинге:
    • 1 - непрозрачное
    • 0.5 – полупрозрачное
    • 0.0 - полностью прозрачное

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

Изменяем немного CSS вёрстку для нашего горизонтального фиксированного меню:

#menu-top-almost-fixed{ position: fixed; margin: 0; left: 0; top: 150px; height: 30px; background: url(./images/white-gradient-l.png) bottom left repeat-x; }

А теперь приведём изменённый javascript код, который поместим между и :

Javascript:

var m1 = 150; /* высота шапки в пикселях */ var m2 = 0; /* отступ, когда во время прокрутки шапка уже не видна */ var menuID = "menu-top-almost-fixed"; /* функция кроссбраузерного определения отступа от верха документа к текущей позиции скроллера прокрутки */ function getScrollTop() { var scrOfY = 0; if(typeof(window.pageYOffset) == "number") { //Netscape compliant scrOfY = window.pageYOffset; } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { //DOM compliant scrOfY = document.body.scrollTop; } else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { //IE6 Strict scrOfY = document.documentElement.scrollTop; } return scrOfY; } /* функция, которая устанавливает верхний отступ для «плавающего» фиксированного горизонтального меню в зависимости от положения скроллера и видимости шапки */ function marginMenuTop() { var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undefined" && s){ if (top+m2 < m1) { s.style.top = (m1-top) + "px"; } else { s.style.top = m2 + "px"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

Итак, здесь всё просто. В настройках мы передаём скрипту следующие параметры:

  • var m1 = 150; - высота шапки в пикселях,
  • var m2 = 0; - отступ, когда во время прокрутки шапка уже не видна.
Меню работает отлично, но, если перезагрузить страницу, меню появляется с первым отступом

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

Function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } };

На следующий код:

Function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); };

После загрузки страницы мы сразу вызываем нашу функцию marginMenuTop , которая проверит положение меню на странице, и применит нужный стиль

Реализуем частично фиксированное меню при помощи jQuery плагина Afixx из Twitter Bootstrap

В продолжение этой темы для Вас была написана статья реализации почти фиксированного меню при помощи jQuery плагина Affix из Twitter Bootstrap framework.

Которые встречаются все чаще и чаще на страницах блогов и прочих ресурсов. Использование таких панелей навигации вполне оправдано. Одной из основных причин активного использования этих jQuery плагинов является то, что меню всегда под рукой посетителя, даже если он находится внизу страницы. К тому же фиксированное меню занимает немного места и не отвлекает внимания от основного контента. Если говорить в целом - фиксированное меню улучшает юзабилити сайта.
Я собрал коллекцию из лучших, на мой взгляд, бесплатных jQuery плагинов для реализации фиксированного меню . Старался, чтоб каждый из плагинов был чем-то уникален, чтобы любой плагин из подборки можно было применить именно в вашем проекте. В коллекции можно найти как простые, так и более сложные плагины с анимацией и т. д.
Если же вам нужно совсем простое фиксированное меню , что-то вроде того, как у нас реализована липкая панель с социальными кнопками, можно обойтись и без jQuery плагинов, ведь нагружать страницу скриптами - это не очень хорошо, но об этом мы поговорим в следующих статьях. Подписывайтесь на наш канал или на страницы в , чтобы не пропустить интересные материалы.
Итак. К вашему вниманию 6 jQuery плагинов для создания фиксированного меню .

Auto-Hide Sticky HeaderjQuery плагин фиксированной навигации , который работает по аналогичному принципу как и скрипт выше, но менее плавный, хотя, на первый взгляд, немного легче. К сожалению, не могу сказать, что навигация в полной мере адаптивная, так как на маленьких экранах пункты меню становятся просто цифрами, что очень странно.

On Scroll Header EffectsМощный jQuery плагин фиксированной панели навигации. Можно задавать на странице определенные отрезки и при скроллинге, по достижению которых, панель трансформируется и способна полностью изменить внешний вид. Таких отрезков на странице может быть сколько угодно.

On-Scroll Animated HeaderХороший плагин для реализации липкой панели навигации . Он работает следующим образом: находясь на самом начале страницы, мы видим высокую шапку, в которой находится логотип и меню. При прокрутке область шапки со всеми элементами, включая лого и навигацию, с помощью свойств плавно уменьшается и становится узкой полоской, прилипшей к верху экрана.

В последнее время в моду вошла такая тенденция как фиксированное меню при прокрутке страницы. Обычно это горизонтальное меню на Landing Page сайтах.

Как это работает – при загрузке страницы меню находится в определенном месте страницы (например, под «шапкой»), а при прокрутке страницы оно фиксируется вверху окна браузера и не прокручивается, как остальное содержимое.

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

Сейчас я расскажу Вам как реализовать такое меню с помощью потратив минимум своего времени и не прибегая за помощью к профессионалам.

Для начала нам подключить jQuery-библиотеку для сайта

< script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >

можно подключить локально или через google.

Для локального подключения необходимо скачать файл jQuery с официального сайта http://jquery.com/

CSS

JavaScript

В скрипте создаем 2 переменные в которые сохраняем значения высоты шапки и отступа блока с меню сверху. Отступ может отсутствовать (как в данном случае). Затем пишем обработчик на событие onScroll объекта window. В нем с помощью метода scrollTop() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.

На этом все, благодаря простым решениям можно добиться красивого фиксированного меню которая не будет прослистываться при прокрутке основной части сайта

Первое что мы сделаем, это вставим наш HTML код в том месте Вашего сайта, где вы хотите видеть меню.

  • Главная
  • WordPress
  • HTML5&CSS3
  • PHP

Меню присваивается класс default , благодаря которому наш jquery сможет потом определить что именно этот блок потом нужно закрепить сверху.

2. jQuery код

В шапке перед закрывающимся head вставляем код. Как я писал выше, он определить блок с классом default и после прокрутки присваивает ему класс fixed . Можете поменять названия классов, если это Вам нужно. Но только внимательно и не пропустите ничего, иначе все попросту перестанет работать. Менять нужно в jQuery, HTML и CSS.

$(document).ready(function(){ var $menu = $("#menu"); $(window).scroll(function(){ if ($(this).scrollTop() > 100 && $menu.hasClass("default")){ $menu.fadeOut("fast",function(){ $(this).removeClass("default") .addClass("fixed transbg") .fadeIn("fast"); }); } else if($(this).scrollTop() $(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, чтобы при нулевой прокрутке меню не наезжало на остальной контент.