Прикрепить меню к верху браузера при прокрутке

Обновлено: 08.07.2024

Как сделать эффект залипания при прокручивании страницы на блоках навигации, меню и любых других без дёрганий и анимации. Используем обычный CSS без JS , а также рассмотрим вариант на jQuery и нативный ванильный JavaScript

Используем CSS — position:sticky

Использование CSS -свойства position:sticky с целью достичь эффекта залипания блока внутри родительского контейнера — самый эффективный, простой и нативный способ, который работает во всех браузерах (кроме Internet Explorer, которым уже почти никто не пользуется).

Как сделать залипающую шапку

Посмотреть, как залипает header , и даже покрутить код можно на Codepen

Как сделать залипающий подвал

Посмотреть, как работает залипающий footer — Codepen

Используем Sticky JS

Если нужно, чтобы залипающий блок останавливался, когда заканчивается родительский контейнер, укажите в родительском контейнере атрибут data-sticky-container

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

Как сделать фиксированное меню в шапке

Всё очень просто. Всё будет основываться на том, где находится скролл на текущий момент относительно нашего меню

Если скролл ниже, чем верхушка блока нашего меню, включаем залипание
Иначе отключаем залипание

Вот и вся логика.
Можете проверить, как работает

HTML будет представлять собой что-то навроде

JavaScript

В Javascript будем определять нашу логику

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

В CSS определяется класс, которым фиксируем меню

Строки 4, 5, 6 не обязательны, по могут помочь при горизонтальном выравнивании и создании эффекта полосы на всю ширину экрана.
Прозрачность регулируется в background: rgba(255, 0, 0, 0.1); , а именно в последнем параметре 0.1 , варируется от 0 (прозрачный) до 1 (непрозрачный), это аналог css свойства opacity

Фиксированный виджет в сайдбаре

Для больших статей дубль содержания статьи в сайдбаре в роли виджета очень удобен, видно всё содержание в категоризованном формате. Также, там можно размещать рекламу или другие виджеты с похожими статьями или чем-то подобным.
Ниже будет приведено несколько вариантов, как сделать залипающий виджет в сайдбаре сбоку от основной статьи.

Как пользоваться

Вы просто устанавливаете плагин и активируете его. Теперь любой виджет в сайдбаре будет иметь такую галочку

У каждого виджета появляется возможность залипания

Как сделать залипающий виджет, который не налезает на низ сайта

Координату Y верха виджета
Высоту виджета
Координату Y подвала сайта

Далее, на событии window.scroll мы считаем текущие координаты верха браузера.

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

JavaScript

Перед скриптом необходимо загрузить jQuery

Если код выше не помогает, проверьте, не использует ли какой-либо из родительских контейнеров css-свойство backface-visibility: hidden; . Если так, то можно заменить код

на

Делаем залипание в сайдбаре вручную, вариант №2

Этот вариант сугубо кастомный, основан на специальном PHP-классе Kama_Contents, реализацию можно увидеть справа в боковой колонке. Выложу код и логику, пригодится.

Предварительная подготовка

Для начала, вам нужно иметь содержание статьи. Также, необходимо подключить jQuery

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

Код HTML

Для примера возьмём содержание этой страницы

Код Javascript

В заключение

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

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

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

Если вы хотите внедрить данный метод на уже готовое собственное меню, тут 2 пути: либо в CSS и JS ниже подставляете свои стили, либо подгоняете имеющийся HTML под вариант сверху.

В стилях размещаете следующие строки:

Кроме непосредственно фиксации меню при прокрутке есть CSS для размещение ссылок в одну строку.

Напоследок предлагаю ознакомиться с еще одним вариантом реализации нашей задачи. Не буду особо детализировать его, просто размещаю вставку из онлайн редактора кода Codepen.

Прокрутка до якоря с фиксированным меню

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

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

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

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

Далее для него в стилях прописываете:

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

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

Динамическое фиксированное меню + якоря содержания (в мобильной версии)

Уже по заголовку видно, что ситуация у меня возникла не простая. Возможно, и существует какое-то более изящное решение, но за день поисков ничего лучше найти не удалось. Оно еще и работает в отличии от остальных!

Пару слов о самой задаче. Вот как выглядит мое меню:

Во-первых, в начале статьи с помощью плагина Easy Table of Contents автоматически выводится содержимое той или иной публикации. При клике на соответствующие ссылки вы попадаете в нужное место статьи. ВАЖНО! Если у вас установлен этот же модуль, то там для мобильных версий есть специальная настройка и ничего дополнительно внедрять НЕ нужно.
Во-вторых, на мобильных устройствах при прокрутке экрана появляется специальное меню с темным фоном, которое фиксируется сверху экрана.

Я перепробовал много разных вариантов: и рассмотренный выше сдвиг якоря вниз страницы с помощью CSS, и добавление специальной переменной, срабатывающей при клике на содержимое Easy Table of Contents, но безрезультатно.

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

В итоге мне помогла эта запись на Stackoverflow. Ниже представлена версия с jQuery для более гладкого перехода. Визуально решение позволяет после перехода на якорь “отмотать” назад содержимое экрана чтобы меню его не перекрывало.

Вот работающий финальный код + возможность посмотреть результат в реальном времени:

Продублирую на всякий случай его в статье. По HTML ничего особенного – сначала идет меню, а затем 5 разных блоков DIV.

Стили тоже вполне стандартные – каждый DIV занимает всю высоту видимой области экрана + прописываются детали фиксированного меню.

Ну, и в завершение – JavaScript. Тут, признаться я мало что могу объяснить, т.к. слабо понимаю, что конкретно происходит. Если бы не комментарии разработчика, то все это походило бы на какую-то магию.

У меня лично код сработал без каких-либо дополнительных правок и манипуляций – я просто добавил его в файл скриптов своего шаблона script.js. Важно заменить в коде переменную OFFSET_HEIGHT_PX, в которой задается высота вашего меню (т.е. итоговый отступ сверху экрана).

Плагин Page scroll to id

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

вертикальным и горизонтальным скроллингом;
разными настройками анимации;
поддержкой переходов по ссылкам на другие страницы;
подсветкой ссылок, заданием отступов, длительности перехода и т.п.;

Вот как выглядит пример меню:

Думаю, Page scroll to id будет полезен, если вам надо сделать навигацию на одностраничном лендинге, а базовый шаблон не обладает подобной опцией (либо она ограничена в настройках).

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

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

Сейчас я расскажу, как можно сделать фиксированное меню средствами jQuery. Как оказалось, это несложно - код состоит всего из нескольких строчек.

Вариант №1

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

Для начала нужно создать страницу.

При помощи CSS устанавливаем высоту «шапки» и создаем правила для блока с меню.

Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.

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

Вариант №2 (Добавлено 18.02.2015)

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

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

Нам потребуется следующий CSS-код.

Скрипт нижнего фиксированного меню на jQuery будет выглядеть немного иначе.

В начале создаем 3 переменных. В h_hght сохраняем значение высоты «шапки», которая занимает весь экран по высоте, в переменную h_nav помещаем значение высоты блока с навигацией. В переменной top будет хранится значение отступа прокрутки сверху, которое будет вычисляться при каждом скролле.

Далее в скрипте в зависимости от значения переменной top , блоку с навигацией устанавливается значение CSS-правил top или bottom .

Таким образом достигается поведение блока с меню, описанное выше.

Ну вот, собственно, и всё.

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

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

Зафиксировать элемент на сайте можно несколькими способами, каждый из них хорош в своем случае.

Фиксация элемента на сайте на CSS

Самый простой вариант – это фиксация элемента на чистом CSS. Все, что вам нужно, это добавить следующие стили к элементу:

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

Если хотите поиграть с положением – измените значение свойств left, top, right и bottom соответственно.

Минусы – не подходит для элементов, находящихся ниже верхней границы сайта.

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

Эти стили вы присваиваете тому элементу, который хотите зафиксировать. Свойство top со значением «10px» говорит здесь о том, что при фиксации элемента необходимо сделать отступ от верхней границы в 10 пикселей.

Фиксация элемента на сайте при прокрутке страницы на jQuery

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

«.fixed_block» здесь – это класс элемента, который нужно зафиксировать при прокрутке, а «.fixed_block_position» - класс обертки.

Их вы вставляете без изменений. Отличный вариант для фиксации рекламных блоков или других элементов находящихся не в первых рядах.

Фиксация элемента на сайте при прокрутке страницы с остановкой в нужном месте на jQuery

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

Ну и те же стили из второго варианта с небольшим дополнением:

На что здесь стоить обратить внимание?

«.fixed_block» – это элемент, который мы фиксируем при прокрутке. «.fixed_block_position» - класс обертки, а «.fixed_block_stop» – это элемент (граница), достигнув которую элемент остановит свое движение (фиксацию).

Читайте также: