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

08.10.2023

Первое что мы сделаем, это вставим наш 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, чтобы при нулевой прокрутке меню не наезжало на остальной контент.

Если верхняя панель навигации или просто меню (это одно и тоже), исчезает с поля зрения, при прокрутке странице, то перед вами точно не фиксированное меню.

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

Демонстрация .

Тем не менее при очевидных преимуществах наличия фиксированного меню , на каждом втором сайте, меню не зафиксированное. Может это не просто сделать, требует умений программирования на 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 , на ваш класс или идентификатор. Теперь при прокрутке, вы будете видеть зафиксированным только меню без шапки.

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

Фиксируем горизонтальное меню с 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 - полностью прозрачное

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

Изменяем немного 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; - отступ, когда во время прокрутки шапка уже не видна.

Меню работает отлично, но, если перезагрузить страницу, меню появляется с первым отступом

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

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

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

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

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

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

Здравствуйте, уважаемые читатели блога сайт. Это скорее заметка для себя, чтобы не забыть, что именно делал, когда захочу все вернуть взад. Началось все с того, что один из читателей предложил написать про плагин для WordPress под названием Q2W3 Fixed Widget (Sticky Widget), который может сделать любой виджет в сайдбаре плавающим или, другими словами, фиксированным.

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

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

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

Зачем фиксировать меню и делать плавающий сайдбар

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

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

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

Как зафиксировать верхнее меню в WordPress

Я же нашел для себя решение на этой вот страничке — как зафиксировать блок или меню на сайте . Для использования данного способа обязательно должна быть подключена библиотека jQuery. Как это сделать, подробно описывал в статье про для подгрузки контента.

Если вы помните, то в статье про оптимизацию скорости загрузки страниц нужно постараться объединить все CSS и JS в один общий (в смысле в два — один для стилей, а другой для скриптов). Вот, собственно, в такой файлик я и добавлял приведенные чуть ниже строчки кода. Хотя можно их добавить и непосредственно в Html код, окружив тегами script. Например, это можно сделать в шаблоне header.php внутри тегов head.

Реализовать фиксацию верхнего меню можно и с помощью чистого CSS — нам в помощь. Собственно, здесь тоже используется позиционирование с помощью этого CSS свойства, но так же появляется возможность начать отображать фиксированное меню не сразу, а спустя некоторое время после начала прокрутки (на определенном расстоянии от верха).

В моем случае код фиксации верхнего меню выглядит вот так:

$(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Напоминаю, что вставить этот фрагмент кода можно в:

Файлик с расширением.js, который живет в папке с используемой вами темой оформления (/wp-content/themes/тема). Он вам подойдет только в том случае, если для него в файле header.php прописана строка подгрузки его вместе с вебстраницами вашего сайта, которая может выглядеть так:

Можно использовать сам файл header.php, заключив данный код между открывающим и закрывающим тегами head и обрамив его в теги script, например, так: $(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Можно и в любое другое место прописать этот код в тегах script. Главное, чтобы он подгружался на нужных страницах блога. Например, можно в footer.php перед закрывающим тегом body.

Теперь обратимся непосредственно к этому коду. Получается, что через 10 пикселов от верха относительное позиционирование сменяется фиксированным (см. статью по приведенной чуть выше ссылке). Если необходимо, то в строчке с else в качестве значения для top можно выбрать не ноль, и тогда фиксированное в верхней части меню будет отступать от верхнего края области просмотра на данное значение пикселов (по-моему, это лишнее).

В отличии от оригинального кода мне пришлось еще добавить width: "100%", ибо в противном случае размер меню по ширине уменьшался, что портило всю картину.

Смотрите, для наглядности я приведу Html код, с помощью которого формируется верхнее меню в моем шаблоне WordPress блога (живет он у меня в файлике header.php из ):

Новое
Лучшее
где заработать
Реклама
Карта сайта
Контакты
Наверх

У вас, скорее всего, в шаблоне вывод пунктов меню будет задан с помощью, например, вот такой конструкции (функции), но это не суть важно.

Обратите внимание, что если в коде, заключенном в echo "" , будут встречаться одиночные кавычки, то их нужно будет экранировать , т.е. поставить перед каждой из них обратный слеш (\") без скобок, естественно.
В общем получилось, как получилось. Как это конкретно прикрутить к вашей теме, вам придется решать самим — когда есть время, то это даже прикольно «поломать голову». Спасибо.

Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
WebPoint PRO - адаптивная тема для WordPress с широким функционалом и грамотной технической поисковой оптимизацией
Share42 - скрипт для добавления на сайт кнопок социальных сетей и закладок (есть вариант плавающей панели)

kalastus-shop.ru