Фиксированное горизонтальное меню. Как сделать фиксированное меню Сделать фиксированное меню при прокрутке страницы

Задача

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

Решение

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

Сегодня мы фиксируем меню при прокрутке страницы, рассмотрим лучший вариант реализации.

Как мы фиксируем меню?

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

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

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

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

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

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

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

.anchor { padding-top : 90px ; }

Anchor { padding-top: 90px; }

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

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

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

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

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

CSS

JavaScript

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

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