Как сделать зафиксированное меню
Создаем фиксированное навигационное меню
Фиксированное навигационное меню часто называют « липким » меню, потому как его суть, помимо самой навигации, состоит в том, что оно всегда остается в одном положении на странице, независимо от скроллинга пользователя.
Это довольно распространенная практика, когда в шаблонной навигации по сайту используется подобный вариант исполнения меню, да и не только меню.
Строка поиска, кнопки социальных сетей, всевозможные уведомления. Подобный шаблон гарантирует, что наиболее важные элементы сайта будут находиться в легкодоступном месте независимо от того, где именно на странице в данный момент находится посетитель.
Примеры
Прежде чем начать, мы взглянем на несколько сайтов, которые уже используют фиксированные навигационные панели, просто для того, чтобы увидеть, как это работает на практике.
Ниже я привожу несколько ссылок.
В Niice используется фиксированная панель навигации, которая содержит в себе окно поиска и меню навигации по сайту. Во время просмотра проектов, вы можете быстро фильтровать их, не прерываясь на перемещение по сайту, используя окно поиска в верхней части экрана:
Это позволяет пользователям быстро прыгать к следующей статье после прочтения предыдущей. Фиксированная панель навигации увеличивает время нахождения пользователя на сайте, потому как читатели постоянно используют меню для выбора свежих новостей:
Навигационная панель это отличный способ, позволяющий сократить время, потраченное на переход от одной задачи к другой при работе с сайтом ( поиск, авторизация, перемещение по структуре ). Говоря по-существу, этот элемент дизайна, повышает эффективность сайта, применяя законы Фиттса :
Создание фиксированной навигационной панели
Теперь, когда мы просмотрели достаточно примеров и осознали преимущества навигации подобного типа, приступим, непосредственно, к повышению эффективности работы нашего онлайн — ресурса.
Ниже демонстрационный пример того, как это выглядит на практике:
Перейти к GitHub Repository
Разметка требуется минимальная — элемент блочной верстки, в который мы поместим содержимое фиксированной навигационной панели:
Когда мы устанавливаем значение position равным fixed панель позиционируется относительно области просмотра. Это и позволяет панели оставаться на одном месте:
Подсказка : если нужно разместить панель в « подвале » области просмотра то, нужно просто заменить top: 0 на bottom: 0 :
На этом, пожалуй, все.
Примечание
Подводя итоги
В нужном контексте фиксированная панель навигации сможет улучшить удобство использования, потому что ее использование уменьшает задержку при переходе к новой задаче, по сравнению с традиционной горизонтальной панелью навигации, которая требует прокрутки обратно к верхней части страницы.
Фиксированные меню, блоки при прокрутке страницы
Создаём эффект залипания при прокручивании страницы на блоках меню навигации, бокового виджета и меню с помощью jQuery и без него.
Используем Sticky JS
Если нужно, чтобы залипающий блок останавливался, когда заканчивается родительский контейнер, укажите в родительском контейнере атрибут data-sticky-container
Этого кода вполне достаточно, чтобы покрыть большинство требований на залипающее меню, шапку сайта или виджет в сайдбаре сбоку. Если этот вариант не помог, ниже пойдут примеры, в которых наглядно объясняется принцип и механизм работы залипания с готовыми решениями.
Как сделать фиксированное меню в шапке
Всё очень просто. Всё будет основываться на том, где находится скролл на текущий момент относительно нашего меню
Вот и вся логика.
Можете проверить, как работает
HTML будет представлять собой что-то навроде
JavaScript
В Javascript будем определять нашу логику
Если не хотите включать залипание для мобильных браузеров, вам пригодится такой код:
В CSS определяется класс, которым фиксируем меню
Фиксированный виджет в сайдбаре
Для больших статей дубль содержания статьи в сайдбаре в роли виджета очень удобен, видно всё содержание в категоризованном формате. Также, там можно размещать рекламу или другие виджеты с похожими статьями или чем-то подобным.
Ниже будет приведено несколько вариантов, как сделать залипающий виджет в сайдбаре сбоку от основной статьи.
Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку
Q2W3 Fixed Widget — это Вордпресс-плагин, который позволяет при прокрутке страницы залипать виджетам, расположенным сбоку в сайдбаре. 
Как пользоваться
Вы просто устанавливаете плагин и активируете его. Теперь любой виджет в сайдбаре будет иметь такую галочку
У каждого виджета появляется возможность залипания
Как сделать залипающий виджет, который не налезает на низ сайта
Ниже показан вариант, который в основе содержит принцип фиксированной навигации из 1 пункта.
Задача — для определённого виджета сделать залипание, но так, чтобы он не налезал на подвал сайта.
Принцип прост: мы высчитываем несколько переменных, а именно:
Далее, на событии window.scroll мы считаем текущие координаты верха браузера.
JavaScript
Перед скриптом необходимо загрузить jQuery
Делаем залипание в сайдбаре вручную, вариант №2
Этот вариант сугубо кастомный, основан на специальном PHP-классе Kama_Contents, реализацию можно увидеть справа в боковой колонке. Выложу код и логику, пригодится.
Предварительная подготовка
Для начала, вам нужно иметь содержание статьи. Также, необходимо подключить jQuery
Код HTML
Для примера возьмём содержание этой страницы
Код Javascript
В заключение
Если вам понравилась статья, но что-то не получается переделать под свои нужды, не стесняйтесь спрашивать об этом в комментариях, вместе найдём решение.
Как сделать фиксированное меню
Если верхняя панель навигации или просто меню (это одно и тоже), исчезает с поля зрения, при прокрутке странице, то перед вами точно не фиксированное меню.
Фиксированное меню, не следует вниз за прокруткой, а всегда остается наверху страницы. Это очень удобно для пользователя, у него всегда есть возможность, быстро перейти к другому разделу вашего сайта, не крутя колесико мышки.
Демонстрация.
Тем не менее при очевидных преимуществах наличия фиксированного меню, на каждом втором сайте, меню не зафиксированное. Может это не просто сделать, требует умений программирования на 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.
Замените 100 (высота шапки) на ваше значение, а также название класса nav, на ваш класс или идентификатор. Теперь при прокрутке, вы будете видеть зафиксированным только меню без шапки.
Демонстрация.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Создаем фиксированное меню на CSS, jQuery + решение проблемы с якорями
С момента публикации первой версии данной заметки прошло уже несколько лет, но текущая информация все еще актуальна. Просто хочу дополнить ее разбором одной нетипичной и сложной ситуации, с которой на днях столкнулся по фрилансу. Новичкам озвученные здесь приемы точно пригодятся, плюс запишу их для себя, т.к. похожие задачи возникают время от времени.
В статье я не буду вдаваться в подробности всех деталей кода, укажу лишь основные нюансы. Можете скопировать эти примеры и попрактиковаться с ними на своих проектах, ну а полным новичкам — не помешает дополнительно глянуть сервис обучения верстке Interneting is Hard.
В посте представлены такие вопросы:
Фиксированное меню на CSS + HTML
В общем случае при создании простого горизонтального фиксированного меню для сайта вам нужно использовать CSS свойства position:fixed и top:0. Также основному блоку контента придется задать верхний отступ margin-top.
Итак, возьмем простую структуру HTML страницы:
Какой-то текст для примера.
В файл стилей CSS добавляете:
В результате получится такая картинка:
Ничего оригинального, но главное, что работает. Дабы увидеть эффект фиксированного меню при прокрутке страницы вам нужно будет добавить больше текста в блок контента (чтобы появилась полоса прокрутки).
Основные детали кода выше, как я уже говорил, это position:fixed, top:0 и margin-top: 60px. Верхний отступ может быть другим, если высота меню у вас меньше/больше.
Кстати, если требуется зафиксировать меню внизу страницы, заменяете код на:
Все то же самое, только вместо top указывается bottom:0. Единственное, нужно будет погуглить как правильно сделать отступ контенту снизу чтобы он тот скрывался за плашкой меню. Решение с margin-bottom:30px; почему-то не сработало.
Фиксированное меню с jQuery и CSS
Второй пример чуть более сложный — с применением библиотеки jQuery. Она встречается на многих сайтах, плюс в большинстве шаблонов WordPress и других CMS подключена изначально. Из Javascript функций здесь используется всего 2, поэтому данное решение можно считать достаточно легким по сравнению с некоторыми другими из интернета. Вот что в итоге должно получиться:
Алгоритм внедрения данного фиксированного меню с jQuery состоит из трех шагов. Первым делом добавляем HTML код:
Если вы хотите внедрить данный метод на уже готовое собственное меню, тут 2 пути: либо в CSS и JS ниже подставляете свои стили, либо подгоняете имеющийся HTML под вариант сверху.
В стилях размещаете следующие строки:
Кроме непосредственно фиксации меню при прокрутке есть CSS для размещение ссылок в одну строку.
Логика работы функций следующая — когда пользователь находится или прокручивает страницу ниже 136 пикселей сверху, то для меню добавляется класс f-nav, а в нем прописаны знакомые нам position:fixed и top:0.
Значение в 136 пикселей можно менять в зависимости от вашего дизайна. Кроме того, если вы интегрируете данный пример в свое готовое горизонтальное фиксированное меню на сайте, то указывайте соответствующие значения классов в JS и CSS. Если у вас возникли какие-то нюансы с реализацией кода, загляните в комментарии к оригинальной статье — там есть парочка подсказок.
Напоследок предлагаю ознакомиться с еще одним вариантом реализации нашей задачи. Не буду особо детализировать его, просто размещаю вставку из онлайн редактора кода Codepen.
Прокрутка до якоря с фиксированным меню
Для начала пару слов о самой задаче. Допустим у вас есть сайт, где вы решили фиксировать меню при прокрутке. При этом в навигации или тексте используются так называемые якоря (Anchor). При переходе по этим ссылкам экран страницы автоматически перемещается к соответствующим местам на странице (где расположен якорь). Однако в таком случае часть контента закрывается блоком меню.
Данная ситуация чаще всего возникает в лендингах. На скриншоте проблема заметна более наглядно:
На StackOverflow найдено два решения задачи, которые отличаются лишь CSS.
Чтобы создать якорь с отступом первым делом добавим ему определенный стиль, например, anchor:
Some text
Далее для него в стилях прописываете:
Здесь 55 пикселей — высота меню + отступ, которые нужны чтобы текст контента был виден. Указывайте значения, подходящие вашему сайту. В работе я применял именно этот вариант.
Альтернативный метод предлагает реализацию через padding, там вообще получается одна строка кода:
В дополнение предлагаю глянуть эту заметку где автор привел сразу 5 разных решений как правильно использовать якоря с отступом для горизонтального фиксированного меню при прокрутке страницы: через псевдоэлементы, негативные отступы и т.п.
Динамическое фиксированное меню + якоря содержания (в мобильной версии)
Уже по заголовку видно, что ситуация у меня возникла не простая. Возможно, и существует какое-то более изящное решение, но за день поисков ничего лучше найти не удалось. Оно еще и работает в отличии от остальных!
Пару слов о самой задаче. Вот как выглядит мое меню:
Я перепробовал много разных вариантов: и рассмотренный выше сдвиг якоря вниз страницы с помощью CSS, и добавление специальной переменной, срабатывающей при клике на содержимое Easy Table of Contents, но безрезультатно.
Сложность была в том, что оба действия (якорь и появление мобильного меню) были привязаны к обработке события scroll. Я пытался их разделить, но переход на якорные ссылки все равно влиял на scroll. Читал, что можно сделать подобные якоря без перегрузки страницы с помощью hashchange, но в эту тему не сильно вникал (хотя в примере ниже эта фишка присутствует).
В итоге мне помогла эта запись на Stackoverflow. Ниже представлена версия с jQuery для более гладкого перехода. Визуально решение позволяет после перехода на якорь “отмотать” назад содержимое экрана чтобы меню его не перекрывало.
Вот работающий финальный код + возможность посмотреть результат в реальном времени:
Продублирую на всякий случай его в статье. По HTML ничего особенного – сначала идет меню, а затем 5 разных блоков DIV.
Фиксируем меню при прокрутке страницы
В последнее время я замечаю, что на множестве сайтов используется так называемое фиксированное «плавающее» меню. Обычно это горизонтальное меню. Вообще, зафиксировать можно не любое меню: и горизонтальное, и вертикальное. Как это работает – при загрузке страницы меню находится в определенном месте страницы (например, под «шапкой»), а при прокрутке страницы оно фиксируется вверху окна браузера и не прокручивается, как остальное содержимое. Если же посетитель прокручивает страницу вверх и достигает начала страницы, меню возвращается на свое место. Таким образом, посетитель, находясь в любом месте страницы, может его использовать и переходить на другие страницы сайта. Это очень удобно и соответствует принципам юзабилити.
Вариант №1
В первом варианте рассмотрим случай, когда «шапка» сайта имеет небольшую высоту (например, 150px) меню расположено под ней, при прокрутке оно фиксируется вверху страницы. В этом варианте страницы все довольно просто и обычно.
Для начала нужно создать страницу.
Примерная схема блоков страницы (вариант №1)
При помощи CSS устанавливаем высоту «шапки» и создаем правила для блока с меню.
Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.
Вариант №2 (Добавлено 18.02.2015)
Второй вариант фиксированного меню более сложный. В нем «шапка» занимает весь экран, меню находится внизу страницы, при прокрутке содержимого к концу страницы, оно «поднимается», до тех пор, пока не достигнет верха, затем меню фиксируется.
При прокрутке страницы к началу, меню также «движется» вместе с содержимым, а когда достигает низа, оно фиксируется.
Примерная схема блоков страницы (вариант №2)
Нам потребуется следующий CSS-код.
Скрипт нижнего фиксированного меню на jQuery будет выглядеть немного иначе.
В начале создаем 3 переменных. В h_hght сохраняем значение высоты «шапки», которая занимает весь экран по высоте, в переменную h_nav помещаем значение высоты блока с навигацией. В переменной top будет хранится значение отступа прокрутки сверху, которое будет вычисляться при каждом скролле.
Таким образом достигается поведение блока с меню, описанное выше.
Ну вот, собственно, и всё.
Я создал 2 простые странички для демонстрации работы обоих вариантов фиксированного меню. При желании вы сможете ознакомиться с ними: