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

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

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

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

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

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

.anchor { padding-top : 90px ; }

Anchor { padding-top: 90px; }

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

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

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

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

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

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

Первое что мы сделаем, это вставим наш 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()

Wi-Fi