Как создать sticky menu с помощью CSS или JQuery
Всем привет! Sticke меню, или прилипающее меню, имеет устойчивую популярность в современном сайтостроении. Это такой вид меню, когда оно прилипает к определенной позиции и остается видимым даже при прокрутке страницы, тем самым обеспечивая постоянный доступ к нему. Существует множество JQuery плагинов для создания липкого меню. Здесь я расскажу, как самостоятельно написать такое меню с помощью JQuery и CSS.
Способ на JQuery
В этой главе мы рассмотрим, как с помощью JQuery манипулировать DOM, а также добавить класс к меню, чтобы зафиксировать его при прохождении определенной точки.
1. Разметка
В нашей разметке мы создадим хедер, в котором будут содержаться основные блоки: блок с классом demo-nav и следом за ним блок с классом main-nav, в котором содержатся ссылки нашего меню. Затем необходимо обернуть наш контент блоком с классом content.
2. CSS
Теперь напишем базовые стили для основных элементов, таких как body, header, хедер самого меню и т. д.
Теперь давайте взглянем на наш блок хедер меню. Необходимо задать относительное позиционирование для панели навигации. Установим высоту в 60px и ширину в 100%. Также добавим нижнюю границу шириной в 1px и стили для ссылок с произвольными внутренними отступами.
Затем мы создадим специальный класс stickytop с фиксированным позиционированием. Это потребуется в дальнейшем в нашем коде JQuery.
В качестве завершающих штрихов добавим немного медиа запросов к нашему хедеру и меню, сделав более отзывчивыми блоки меню и контента на маленьких экранах.
3. Скрипт
Чтобы добиться эффекта плавающего прилипающего меню мы будем использовать самописную функцию, которая будет срабатывать в определенной точке на экране.
Обратите внимание: мы используем библиотеку JQuery, не забудьте подключить ее в шапке с помощью Google Hosted Libraries или самостоятельно, добавив файл jQuery.js в соответствующую директорию.
Попробуйте добавить код ниже прямо перед закрывающим тегом body, не забудьте обернуть код в теги script.
Способ на CSS
Теперь, когда мы знаем, как создать прилипающее меню с помощью JQuery, давайте посмотрим, как сделать такое же меню, но с помощью CSS.
1. Разметка
Разметка точно такая же, как и в примере с JQuery, однако мы будем менять позицию хедера и меню с помощью CSS.
CSS position: sticky — создание эффектов пролистывания с использованием липкого позиционирования
Дата публикации: 2018-09-28
От автора: липкие элементы преимущественно используются для удерживания чего-либо, отображаемого на экране во время прокрутки. Как же здорово, что мы можем и скрыть элементы так же!
Вот типичная (хм) ситуация:
Липкие элементы (CSS position sticky;) очень похожи на фиксированные (position: fixed;), поскольку они сохраняют свое положение на экране, даже когда пользователь прокручивается страницу вверх или вниз. В чем разница? Липкий элемент остается ограниченным родительским контейнером, в котором он находится. Сравните пример выше с этим, в котором используется та же концепция, но через фиксированный элемент:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Предположим, мы хотим создать эффект, когда элементы пролистываются или скрываются при прокрутке — вроде как эффект параллакса. Например, заголовок и футер, который скрываются и показываются при прокрутке:
И угадайте что? Мы можем сделать это с помощью липких элементов!
Как мы это сделали? Рад, что вы спросили. Давайте выясним.
Настройка HTML
В нашем примере есть три липких элемента:
Первый — заголовок категории, который уходит под тело статьи, когда достигает вершины экрана.
Второй — название статьи, и оно остается видимым в верхней части экрана, а контент статьи исчезает под ним при прокрутке (что является типичным поведением липкого элемента).
Третий элемент — футер, который уходит под тело статьи и появляется, когда статья прокручивается выше определенного порога.
Давайте посмотрим, как это делается. Вот HTML, с которым мы работаем … в основном два блока article:
Липкий CSS
Я не настраиваю значительно липкие элементы, только задаю некоторые стили. Они и так уже делают то, что им нужно делать: закрепляются на экране. Осталось только создать перекрытие и некоторое пространство между краем страницы и прокручиваемыми элементами.
Вероятно, есть огромное количество способов, с помощью которых мы можем создать перекрытие, с помощью которого будут скрываться элементы — я выбрал фоновое изображение.
К статье применяется линейный градиент фона, который идет сверху вниз, начиная с 50px, где фон полностью прозрачный, затем он резко переходит в цветной и на 50px снизу снова прозрачный. Это работа для calc? Таким образом у нас есть две прозрачные полосы размером 50 пикселей, одна сверху и одна внизу, с равной высотой, соответствующей высоте заголовка категории и футера.
Заголовок категории и футер статьи — это элементы, которые уходят под текст и выходят из-под него, поэтому их высоты определяют, как долго прозрачные полосы будут находиться вверху и внизу градиента.
Чтобы реализовать это, заголовок категории и заголовок статьи прикрепляются к экрану, когда их вершины выравниваются с вершиной окна просмотра. Название статьи укладывается поверх заголовка категории и, когда оно достигает верхней части окна просмотра, полностью скрывает заголовок категории.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как создать прилипающее меню с помощью CSS или JQuery
Дата публикации: 2015-08-10
От автора: в настоящее время в интернете все больше набирает популярность фиксированное или «прилипающее» меню. Меню в таком случае прилипает к определенной позиции и остается видимым даже при прокрутке страницы, тем самым обеспечивая постоянный доступ к нему.
Самыми лучшими примерами могут послужить такие сайты, как Facebook и Designmodo. При прокрутке страницы основное меню навигации остается сверху и никуда не уезжает.
С одной стороны, существует множество JQuery плагинов для создания липкого меню, с другой, мы можем самостоятельно написать такое меню всего лишь парой строк JQueryи CSS кода. В данном уроке мы рассмотрим, как можно создать липкое меню, как на JQuery, так и на CSS. Начнем.
Способ на JQuery
В этой главе мы рассмотрим, как с помощью JQuery манипулировать DOM, а также добавить класс к меню, чтобы зафиксировать его при прохождении определенной точки. Предполагается, что вы уже знакомы с HTML5, так как мы будем использовать парочку тегов из пятой версии в нашей разметке.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Разметка
В нашей разметке мы создадим хедер, в котором будут содержаться основные блоки: блок с классом demo-nav и следом за ним блок с классом main-nav, в котором содержатся ссылки нашего меню. Затем необходимо обернуть наш контент блоком с классом content. Будем использовать lorem ipsum в качестве текста.
Адаптивное липкое меню CSS при прокрутке
В материале узнаете, как самостоятельно создать адаптивную липкую панель навигации, где только задействуем JavaScript. Ведь навигационная панель — одна из отличительных особенностей на сайте или блоге, так как основной по ней мы изначально ищем нам нужный материал. Где также панель навигации идет в адаптивном компоненте, которые служат для корректного вывода на разных размерах по ширине мониторов иди мобильных экранов. Производится автоматически разворот, что автоматически сворачивается, где с горизонтального положение выходит на вертикальное, это все зависит по мере увеличения доступной ширины области просмотра. Если вы хотите видеть его на всех страницах, то не сложно открепить, и выставить на полноценный сайт.
Меню проверено на работоспособность:
Переход на мобильный гаджет:
С нажатием кнопки идет выдвижение вертикального меню:
Здесь идет описание для страницы
Вы также можете создавать различные варианты панели навигации, где за панелью закреплены стили, что делают саму панель шире или меняют оттенок цвета, как основа каркаса также фиксированную панель навигации с гораздо меньшими усилиями.
Как ранее было подмечено, панель навигации изначально сворачивалась на устройствах, где идет не такой большой обхват просмотра, например на сотовых телефонах, но также производится расширение, это когда пользователь нажимал кнопку переключения. Где станет горизонтальным, а точнее обычным для большого экрана, таких как ноутбук или настольные компьютеры.
Как на самом деле работает position: sticky в CSS
У position: sticky уже очень неплохая браузерная поддержка, но большинство разработчиков так и не используют это свойство.
У этого есть две основные причины: во-первых, браузерам потребовалось много времени на реализацию адекватной поддержки этого свойства. И все просто успели забыть о нём.
Во-вторых, многие разработчики до конца не понимают логику, по которой это свойство работает. И тут появляюсь я!
Я полагаю, что вы хорошо знакомы с позиционированием в CSS, но давайте кратко повторим основные моменты:
Новое значение sticky похоже на все предыдущие значения сразу. Я проиллюстрирую это чуть позже.
Моё первое знакомство с «липким» позиционированием
Думаю, что большинство из вас игрались с «липким» позиционированием. Так было и у меня, пока в один момент я не осознал, что совсем не понимаю это свойство.
При первом знакомстве с position: sticky все быстро понимают, что элемент залипает, когда область просмотра достигает определённой позиции.
Проблема в том, что иногда это работает, а иногда нет. Когда всё работает, то элемент и правда залипает. Но когда не работает, то при прокрутке элемент перестаёт залипать. Как человеку, который живёт одним только CSS, мне было важно разобраться в сути проблемы. Именно поэтому я решил тщательно изучить «липкое» позиционирование.
«Липкая» разведка
Во время своих экспериментов я заметил, что если элемент с position: sticky является единственным ребёнком своего родителя-обёртки, то этот «липкий» элемент не залипает.
Когда я добавлял больше элементов внутрь родителя-обёртки всё начинало работать как ожидалось.
Почему так происходит?
Причина кроется в том, что элемент с position: sticky может перемещаться только в пределах контейнера, в котором находится. А поскольку в моём случае он был единственным ребёнком, у него не было элементов-братьев, поверх которых он мог перемещаться.
Как на самом деле работает position: sticky в CSS
«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.
«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.
В этом причина, почему в предыдущем примере «липкий» элемент не залипал: он был единственным дочерним элементом контейнера.
Понимание «липкого» поведения
Как я и говорил, position: sticky ведёт себя не так, как другие типы позиционирования. Но, с другой стороны, у них есть определённые сходства. Позвольте мне пояснить:
Залипает внизу?!
В большинстве случаев вы будете использовать position: sticky чтобы прикрепить элемент к верхнему краю страницы. Что-то вроде этого:
Именно для таких сценариев и был создан этот тип позиционирования. До его появления такой трюк приходилось проворачивать с помощью JavaScript.
Но вы с тем же успехом можете использовать это свойство для того, чтобы прилепить элемент к нижней границе. Это значит, что футеру можно задать «липкое» позиционирование и при скролле он всегда будет залипать у нижнего края. И когда мы дойдём до конца «липкого» контейнера наш элемент остановится на своей естественной позиции. Лучше использовать эту особенность для элементов, находящихся в самом конце контейнера.
В реальной жизни я использую такое поведение для сводных таблиц. И, я думаю, с помощью этого приёма можно реализовать «липкую» навигацию в футере.
Браузерная поддержка
В заключении
Вот и всё. Я надеюсь, что вам понравилась эта статья и мне удалось поделиться своим опытом. Я буду признателен, если вы поделитесь этим постом и поаплодируйте.
Другие мои посты о CSS
Кто я?
Меня зовут Элад Шехтер, я веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.
Вы можете найти меня в группах на Facebook:
