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

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

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

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

Задача

Задать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.

Решение

«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства 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. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.

Здравствуйте, уважаемые читатели блога сайт. Это скорее заметка для себя, чтобы не забыть, что именно делал, когда захочу все вернуть взад. Началось все с того, что один из читателей предложил написать про плагин для 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 - скрипт для добавления на сайт кнопок социальных сетей и закладок (есть вариант плавающей панели)

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

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

  Надеюсь, Вы уже давно пользуетесь новыми.

  Первая часть. Подключение стилей и js файлов.

  Давайте первым делом подключим по стандарту все необходимые стили и добавим файлы js , которые требуются для данного скрипта. Сначала подключаем файл стилей demo.css .

  Затем подключаем библиотеку jquery-latest.min.js и файл menu.js, который будет отвечать за работоспособность отступов и стыков в меню, а также за исходное правильное положение, заданное по высоте.

  Вторая часть. Файл index.php .

  Тут все просто, выводим меню по стандарту через ul li и делаем оболочку блочным элементом div , который будет иметь идентификатор menu , взаимодействующий, полноценно с стилями и файлом menu.js .

  Ru/news/">Новости

• О проекте

Третья часть. Файл demo.css .

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

#menu { background:#ab4040; width:100%; position:fixed; } #menu ul{ margin:0 auto; width:750px; height:40px; }

Затем работаем с каждым элементом меню, а точнее с ссылками и прописываем им следующие свойства.

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

#menu ul li { float:left; list-style:none; width:140px; text-align:center; border-right:1px inset #d0d0d0; height:40px; } .menuleft{ border-left:1px inset #d0d0d0; } #menu ul li a { line-height:40px; text-decoration:none; color:#ffffff; } #menu ul li:hover{ box-shadow:0 1px 0 #ab4040; background:#f43e3e; }

Четвертая часть. Файл menu.js .

Теперь у нас самое интересное. Будем фиксировать наше меню, на том уровне, там где оно нам потребуется. Пропишем переменную menu_height , в которой будем хранить высоту шапки нашего сайта. Это позволит при скроллинге страницы, точно фиксировать меню на нужном расстоянии от шапки сайта. В переменной element , мы храним свойства идентификатора menu и задаем свойство top , указывая, что меню будет сверху, и сравнивая с переменной menu_top , вычисляем нужное расстояние от шапки до меню.

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

Данная ситуация чаще всего возникает в . На скриншоте проблема заметна более наглядно:

На StackOverflow найдено два решения задачи, которые отличаются лишь CSS.

Чтобы создать якорь с отступом первым делом добавим ему определенный стиль, например, anchor :

Здесь 55 пикселей — высота меню + отступ, которые нужны чтобы текст контента был виден. Указывайте значения, подходящие вашему сайту. В работе я применял именно этот вариант.

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

.anchor { padding-top : 90px ; }

Anchor { padding-top: 90px; }

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

Если есть вопросы или что добавить по теме, пишем в комментариях.