Sticky menu or anything on scroll что это
Sticky menu or anything on scroll что это
Многие популярные сайты сегодня используют липкое меню навигации. Обычные навигационные меню отображаются сверху и исчезают, когда пользователи прокручивают страницу вниз. Прикрепленные же навигационные меню плавают, когда пользователи прокручивают страницу вниз и всегда видны на экране. В этой статье я покажу, как легко создать липкое плавающее меню навигации в WordPress.
Способ 1: добавление липкого плавающего меню навигации с помощью плагина
Этот метод проще и рекомендуется для всех пользователей.
Первое, что вам нужно сделать, это установить и активировать плагин Sticky Menu (or Anything!) on Scroll.
После активации плагина вам необходимо перейти на страницу настроек »Sticky Menu (or Anything!) Для настройки параметров плагина.
Сначала вам нужно ввести идентификатор CSS меню навигации, которое вы хотите сделать липким.
Просто зайдите на свой веб-сайт и наведите курсор мыши на меню навигации. После этого вам нужно щелкнуть правой кнопкой мыши и выбрать подходящий пункт в выпадающем меню.
Вы сможете увидеть подобный исходный код для своего меню навигации:
Следующий пункт на странице настроек плагина позволяет настроить отступ между верхней частью экрана и липким меню навигации. Вы можете использовать этот параметр, если ваше меню перекрывает элемент, который вы не хотите скрывать. В обратном случае пропустите эту настройку.
После этого вам нужно установить флажок рядом с параметром «Проверить панель администратора» или «Check for Admin Bar». Это позволяет плагину добавлять отступ для панели администратора WordPress, которая видна только зарегистрированным пользователям.
Следующая опция на странице настроек позволяет разблокировать меню навигации, если пользователь просматривает ваш сайт на маленьком экране, например, экране мобильного телефона.
Вы можете проверить, как это выглядит на мобильных устройствах или планшетах. Если вам это не понравится, вы можете выставить 780px для этого пункта.
Не забудьте нажать кнопку сохранения, чтобы сохранить изменения.
Теперь вы можете увидеть липкое плавающее меню навигации на Вашем сайте в действии.
WordPress.org
Sticky Menu & Sticky Header
Description
The WP Sticky Menu (or Sticky Header) On Scroll plugin allows you to make any element on your pages “sticky” as soon as it hits the top of the page when you scroll down. Although this is commonly used to keep menus at the top of your page to create floating menus, the plugin allows you to make any element sticky. Make a sticky header, stick menu, sticky widget (fixed widget), sticky logo, sticky call to action or a floating menu.
Features
Screenshots
Installation
Can I make multiple elements sticky?
Sure, WP Sticky PRO has that option. You can make as many elements sticky as you like and configure settings individually for each element.
I selected a class/ID in the settings screen, but the element doesn’t stick when I scroll down. Why not?
First, make sure that if you select the element by its class name, it is preceded by a dot (e.g. “.main-menu”), and if you select it by its ID, that it’s preceded by a pound/hash/number sign (e.g. “#main-menu”). Also, make sure there is only ONE element on the page with the selector you’re using. If there is none, or more than one element that matches your selector, nothing will happen.
Once the element becomes sticky, it’s not positioned/sized properly at all.
Due to the nature of CSS, there are situations where an element will not stick properly, usually if it has specific properties that are used to manipulate its location and/or dimensions. If your sticky element has any of the following properties, this could cause conflicts:
Try to avoid all this where possible, but if you can’t, using the plugin in Legacy Mode (see below) helps sometimes.
Another situation that can cause trouble, is when any parent of your sticky element has the “transform” CSS property applied to it.
Once the element becomes sticky, it’s not responsive and doesn’t resize when I change the browser size.
This is a known (and annoying) bug in the plugin that I haven’t been able to solve properly yet. For some sites (when the element does not contain any JavaScript interactivity, usually), it sometimes helps to use the plugin in Legacy Mode (see below).
Is it possible to add some styles to the element but only when it’s sticky?
To add styles to your sticky element when it’s not sticky, use class name “.element-is-not-sticky”.
To add styles to your sticky element only when it’s sticky, use class name “.element-is-sticky”
The following code would give your element a red background only when it’s not sticky, and blue only when it is:
.element-is-not-sticky <
background: red;
>
.element-is-sticky <
background: blue;
>
Once the element becomes sticky, there’s a brief moment where you see it twice.
If you’re using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.
My menu sticks, but it doesn’t open on the Responsive theme when it’s sticky.
This was a bug in pre-2.0 versions, and an incompatibility with the theme. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need to enable Legacy Mode for some reason, it would be better to turn off stickiness for the mobile menu (set “Do not stick element when screen smaller than:” to 651 pixels).
I have another plugin called Easy Smooth Scroll Links, but once my menu becomes sticky, that one doesn’t work anymore.
This was a bug in pre-2.0 versions, and an incompatibility with the plugin. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need Legacy Mode enabled for some reason, there is no fix for this bug, however there is an alternative workaround. According to reports from users who had this issue, a plugin called Page Scroll To ID is a worthy alternative to Easy Smooth Scroll Links and works with the Sticky Anything plugin in Legacy Mode.
Still doesn’t work. What could be wrong?
Check the “Debug Mode” checkbox in the plugin’s settings. Reload the page and you may see errors in your browser’s console window. If you’ve used a selector that doesn’t exist, OR there are more of them on the page, you will be notified of that in the console.
Is it possible to have multiple sticky elements?
The current version only allows one sticky element, but this functionality will be implemented in the next major version. No expected release date, though.
What is Legacy Mode? Should I use it?
In version 2.0 of the plugin, a new/better method for making elements sticky was introduced. Before this, a sticky element would essentially be a cloned copy of the original element. Now, the element itself becomes sticky and doesn’t use copying and cloning anymore, which solves a lot of issues.
So, should you use it or not? Well, if you upgraded this plugin from an earlier version, Legacy Mode will be turned ON by default, because chances are that the old method worked perfectly fine for your site. If that’s the case, there is not really a need to use the new method and you can just continue using the old, classic method. If it ain’t broke, don’t fix it, right?
Having said that, it’s worth checking if your element works just as well with Legacy Mode turned OFF, since this is the “better” method. Just give it a quick try. If it doesn’t work, you can always just go back and enable it again.
NOTE: new installs of the plugin will have the Legacy Mode turned off by default. Only UPGRADES from 1.4 (or before) should have it turned on by default.
What is this Dynamic Mode thing exactly?
This mode is only available in Legacy Mode, and to properly explain this, we’ll need to go a little deeper in the plugin’s functionality. So bear with me…
In Legacy Mode, when an element becomes sticky at the top of the page (and keeps its place regardless of the scrolling), it’s actually not the element itself you see, but a cloned copy of it, while the actual original element is out of view and invisible.
The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.
In the original plugin version, the clone would be created right the moment when you load the page (but not visible right away). Then when you would scroll down, it would become visible (and stick at the top), while the original element would disappear from view.
However, some themes use JavaScript to dynamically create elements (menus, mostly) for mobile sites. With this method, a menu doesn’t exist in the HTML source code when you load the page, but is created some time after the page is fully loaded — in many cases, these menus would just be generated ONLY when the screen is more (or less) than a certain specific width. With the original version of the plugin, the problem would be that the original element (that you want to make sticky) may not have been fully created upon page load, so the clone would also not be fully functional.
Enter Dynamic Mode. Now, a clone of the element is not created on page load — instead, it’s only created when the user scrolls and hits the “sticky” point. This ensures that the cloned element is an actual 1-on-1 copy of what the original element consists of at that specific point in time (and not at the “page is loaded” point, which may be different if the element was altered since).
Why don’t we use Dynamic Mode all the time then? This has to do with the fact that other plugins initialize themselves on page load and may need the full markup (including the cloned element) at that point. In Dynamic Mode, there is no clone available yet on page load, so that could cause an issue if that other plugin is looking for an element that doesn’t exist yet.
(This may all sound terribly confusing. And it is! So, much work was done to fix this nonsense: since v2.0 of the plugin, a whole different method is being used to make elements sticky, and Dynamic Mode is not even an issue anymore.)
WordPress.org
Русский
Sticky Menu & Sticky Header
Описание
The WP Sticky Menu (or Sticky Header) On Scroll plugin allows you to make any element on your pages «sticky» as soon as it hits the top of the page when you scroll down. Although this is commonly used to keep menus at the top of your page to create floating menus, the plugin allows you to make any element sticky. Make a sticky header, stick menu, sticky widget (fixed widget), sticky logo, sticky call to action or a floating menu.
Возможности
Скриншоты
Установка
Часто задаваемые вопросы
Могу ли я сделать несколько элементов липкими?
Sure, WP Sticky PRO has that option. You can make as many elements sticky as you like and configure settings individually for each element.
Я выбрал класс/ID на экране настроек, но элемент не прилипает, когда я прокручиваю вниз. Почему?
Во-первых, убедитесь, что если вы выбрали элемент по имени класса, то ему предшествует точка (напр,».main-menu»), а если вы выбираете его по ID, что ему предшествует решетка/номер (напр, «#main-menu»). Кроме того, убедитесь, что на странице есть только один элемент с селектором, который вы используете. Если нет ни одного элемента или элементов, соответствующего вашему селектору, более одного, то ничего не произойдет.
Как только элемент становится липким, он вообще не позиционируется/не имеет правильного размера.
Из-за природы CSS существуют ситуации, когда элемент не будет прилипать должным образом, обычно если он имеет определенные свойства, которые используются для управления его местоположением и/или размерами. Если ваш липкий элемент имеет одно из следующих свойств, это может привести к конфликтам:
Старайтесь избегать всего этого, где это возможно, но если не можете, то иногда помогает использование плагина в режиме совместимости (Legacy Mode) (см. ниже).
Другая ситуация, которая может вызвать проблемы — это когда к любому родительскому элементу прикрепленного элемента применено свойство CSS «transform».
Как только элемент становится липким, он не реагирует и не меняет размер, когда я меняю размер браузера.
Это известная (и раздражающая) ошибка в плагине, которую я еще не смог решить должным образом. Для некоторых сайтов (обычно когда элемент не содержит JavaScript интерактивности) иногда помогает использование плагин в режиме совместимости (Legacy Mode) (см. ниже).
Можно ли добавить некоторые стили к элементу, но только тогда, когда он липкий?
Чтобы добавить стили к липкому элементу, когда он не липкий, используйте имя класса «.element-is-not-sticky».
Чтобы добавлять стили к липкому элементу, только когда он липкий, используйте имя класса «.element-is-sticky»
Следующий код придаст вашему элементу красный фон только тогда, когда он не липкий, а синий только тогда, когда липкий:
.element-is-not-sticky <
background: red;
>
.element-is-sticky <
background: blue;
>
Как только элемент становится липким, есть мгновение, когда вы видите его дважды.
Если вы используете плагин в режиме совместимости (см. ниже), это происходит, когда к липкому элементу (или любому его содержимому) применяется CSS переход. Поскольку исходный элемент становится невидимым (и его клонированная копия становится видимой), изменение статуса видимого к невидимому будет происходить с переходом (т. е. не сразу). Либо удалите все переходы, которые есть у элемента, либо попробуйте отключить режим совместимости.
Мое меню прилипает, но оно не открывается на адаптивной теме, когда оно липкое.
Это была ошибка в версиях до 2.0 и несовместимость с темой. Она была исправлена в версии 2.0, но в режиме совместимости эта ошибка все еще присутствует. Если Вам по какой-то причине нужно включить режим совместимости, то лучше отключить липкость для мобильного меню (установите значение «Не закреплять элемент, когда экран менее:» на 651 пиксель).
У меня есть еще один плагин под названием Easy Smooth Scroll Links, но как только мое меню становится липким, он больше не работает.
Это была ошибка в версиях до 2.0 и несовместимость с плагином. Она была исправлена в версии 2.0, но в режиме совместимости эта ошибка все еще присутствует. Если вам по какой-то причине нужно включить режим совместимости, то исправления этой ошибки не существует, однако есть альтернативный обходной путь. Согласно сообщениям пользователей, у которых была эта проблема, плагин под названием Page Scroll To ID является достойной альтернативой Easy Smooth Scroll Links и работает с плагином Sticky Anything в режиме совместимости.
Все равно не работает. Что может быть не так?
Установите флажок «Режим отладки (Debug Mode)» в настройках плагина. Перезагрузите страницу, и вы сможете увидеть ошибки в окне консоли вашего браузера. Если вы использовали несуществующий селектор ИЛИ на странице их больше, вы получите уведомление об этом в консоли.
Можно ли иметь несколько липких элементов?
Текущая версия допускает только один липкий элемент, но эта функциональность будет реализована в следующей основной версии. Однако ожидаемой даты выхода нет.
Что такое режим совместимости? Должен ли я использовать его?
В версии плагина 2.0 был введен новый улучшенный метод создания липких элементов. Ранее липкий элемент был по сути клонированной копией исходного элемента. Теперь сам элемент становится липким и больше не используется копирование и клонирование, что решает множество проблем.
Итак, следует ли вам использовать это или нет? Если вы обновили этот плагин с более ранней версии, то режим совместимости будет включен по умолчанию, потому что есть вероятность, что этот метод отлично работал для вашего сайта. Если это так, то на самом деле нет необходимости использовать новый метод, и вы можете просто продолжать использовать старый, классический метод. Если все работает, то не надо чинить, верно?
Сказав это, стоит проверить, работает ли ваш элемент так же хорошо с выключенным режимом совместимости, так как это «лучший» метод. Просто проверьте. Если не работает, вы всегда можете просто вернуться и включить его снова.
ПРИМЕЧАНИЕ: новые установки плагина будут иметь режим совместимости выключенным по умолчанию. Только при обновлении с версии 1.4 (или ранее) он должен быть включен по умолчанию.
Что же это за динамический режим такой?
Этот режим доступен только в режиме совместимости, и чтобы правильно объяснить это, нам нужно будет немного углубиться в функциональность плагина. Так что потерпите меня…
В режиме совместимости, когда элемент становится липким в верхней части страницы (и сохраняет свое место независимо от прокрутки), на самом деле вы видите не сам элемент, а его клонированную копию, в то время как фактический исходный элемент находится вне поля зрения и невидим.
Исходный элемент всегда остается там, где он изначально находится на странице, в то время как клонированный элемент всегда находится в верхней части окна браузера. Однако вы никогда не увидите их оба одновременно; в зависимости от прокрутки, он просто показывает либо один, либо другой.
В оригинальной версии плагина, клон будет создан в тот момент, когда вы загружаете страницу (но не виден сразу). Затем, когда вы прокрутите вниз, он станет видимым (и закрепится в верхней части), в то время как исходный элемент исчезнет из виду.
Однако некоторые темы используют JavaScript для динамического создания элементов (в основном, меню) для мобильных сайтов. С помощью этого метода меню не существует в исходном HTML коде при загрузке страницы, а создается через некоторое время после полной загрузки страницы — во многих случаях эти меню просто генерируются только тогда, когда экран больше (или меньше) определенной заданной ширины. С оригинальной версией плагина проблема будет заключаться в том, что исходный элемент (который вы хотите сделать липким) возможно не был полностью создан при загрузке страницы, поэтому клон также не будет полностью функциональным.
Войдите в динамический режим. Теперь клон элемента не создается при загрузке страницы — вместо этого он создается только тогда, когда пользователь прокручивает и попадает в «липкую» точку. Это гарантирует, что клонированный элемент является фактической копией 1в1 того, из чего состоит исходный элемент в этот конкретный момент времени (а не в точке «страница загружена», которая может отличаться, если элемент был изменен с тех пор).
Почему бы нам не использовать динамический режим все время? Это связано с тем, что другие плагины инициализируются при загрузке страницы и могут нуждаться в полной разметке (включая клонированный элемент) в этот момент. В динамическом режиме клон еще не доступен при загрузке страницы, так что это может вызвать проблему, если этот другой плагин ищет элемент, который еще не существует.
(Все это может показаться ужасно запутанным. Так оно и есть! Было проделано много работы, чтобы исправить эту ерунду: начиная с версии 2.0 используется совершенно другой метод, чтобы сделать элементы липкими, и динамический режим больше не является проблемой.)
Как зафиксировать меню с «липкой» навигацией при прокрутке на WordPress
На современных одностраничных сайтах с бесконечно длинной главной страницей, липкий хедер (sticky header) — это та деталь, которая помогает пользователям всегда и везде быстро перейти к нужному разделу сайта.
Сегодня в этом посте мы рассмотрим плюсы и минусы липкой панели навигации на вашем сайте и сделаем небольшой обзор плагинов, с помощью которых вы сможет создать sticky header у себя на сайте. Приступим!
Плюсы и минусы Липких Хедеров
В последнее время липкие хедеры становятся все более популярными, и это не просто результат того, что они круто влияют на дизайн сайта. Быстрый доступ к навигации по сайту — очень важный нюанс, и его невозможно не учитывать в наше время бесконечной прокрутки.
Тем не менее, мнения по поводу липких заголовков разделяются, есть достойные аргументы за и против их применения.
Давайте начнем с плюсов
Однако, везде есть и свои минусы
В нашем случае, самым очевидным будет неправильное оформление заголовка. Вы можете просто запутаться в реализации и сделать хедер слишком большим и навязчивым, особенно для мобильных устройств. Здесь нет идеальной формулы, так что экспериментируйте, тестируйте результаты на реальных устройствах и эмуляторах, используйте различные инструменты и плагины, которые могут помочь в данной ситуации.
Так же стоит упомянуть о том, что есть риск напортачить в коде. У вас может получиться настоящий Франкенхедер, который будет полностью скрывать содержимое сайта или просто вызывать раздражающие баги. Ниже мы представим плагины, которые помогут вам избежать подобных ситуаций.
Но прежде чем приступить к обзору наших WordPress плагинов, давайте взглянем на несколько примеров.
Примеры сайтов с липкой навигацией
Oasis
Сайт Oasis — это отличный пример фиксированной верхней панели навигации. В любой момент, с любого устройства у вас будет доступ к хедеру сайта.
В десктопной версии сайта для вас доступно полное меню. Переключившись на мобильное устройство, вы увидите самые необходимые опции и меню-гамбургер.
Gareth Emery
На сайте Gareth Emery липкий хедер будет уменьшаться при прокрутке и становится прозрачным.
Переключитесь на мобильную версию и увидите замечательный пример того, как sticky header влияет на брендинг: на сайте будет виден только логотип и меню-гамбургер.
Squid Compression
Сайт Squid Compression — пример того, как можно выгодно использовать липкий боковой хедер.
Теперь, когда мы рассмотрели достоинства и недостатки липких хедеров, посмотрели на несколько реальных примеров, давайте перейдем к обзору инструментов.
Плагины для создания липких хедеров в WordPress
1. Sticky Header
Sticky Header от ThematoSoup — это простой плагин, который предоставляет все необходимые базовые функции.
Большинство настроек вы сможете сделать через Customizer, можно изменять цвет фона, текста и задавать максимальную ширину хедера. Можно установить ширину хедера после скролинга вниз и выбрать определенные параметры для мобильных устройств.
2. Sticky Menu
Название плагина, конечно, очень необычное, но оно точно описывает его возможности.
Плагин позволяет сделать «липким» практически каждый элемент сайта, но помните, что не стоит слишком увлекаться. Для реализации потребуются минимальные знания HTML/CSS, чтобы правильно разместить селектор на нужной странице. Это достаточно тривиальная вещь, так что не следует этого опасаться.
Есть все необходимые базовые параметры, вы сможете сделать нужные настройки для отображения хедера на мобильных устройствах, к тому же есть настройки для указания Z-индекса вашего липкого элемента, чтобы убедиться, что его всегда видно. Также доступен режим отладки.
3. myStickymenu
Изначально плагин myStickymenu был разработан специально для темы Twenty Thirteen, но он должен отлично работать и со всеми другими современными, отзывчивыми темами.
Плагин полностью готов к локализации, отзывчивый, включает в себя простые опции для добавления пользовательского кода CSS.
4. WordPress Notification Bar
Варианты, которые мы рассматривали до сих пор, прежде всего были направлены на создание навигации в липком хедере, но иногда все, что нужно, это закрепить простое уведомление или кнопку «call to action». Классический случай — когда нам нужно выделить специальные предложения на сайте или напомнить пользователям, подписаться на рассылку новостей.
WordPress Notification Bar от SeedProd отлично подойдет для решения этой задачи. Его несложно установить, идут простые настройки для цветов, есть совместимость с MultiSite-установками.
5. WPFront Notification Bar
WPFront Notification Bar также, как можно предположить из названия, больше ориентирован на уведомления, а не навигацию.
Параметры настроек чуть более продвинутые, чем в предыдущем варианте. Можно задавать высоту, выбирать где конкретно размещать уведомление во время скролинга, настраивать цвета и т.д.
Также можно задавать дату для начала и конца отображения хедера, ограничивать его появление на конкретных постах или страницах.
Разработчики проделали хорошую работу, собрав простые, но интересные идеи с примерами на одной странице. Более подробное руководство также доступно.
6. Hero Menu
Он позволяет пользователям создавать все виды меню в течение нескольких минут, начиная от многофункциональных мега меню вплоть до самых простых drop-down вариантов.
Для создания липкого хедера вам понадобится всего один клик. Есть необходимые настройки для цвета, прозрачности и логотипа. Полная документация и поддержка также доступны на сайте разработчика. Если вы ищете инструмент из серии «все-в-одном», то этот плагин именно то, что вам нужно.
Добавление липкой навигации на ваш сайт
Неважно, хотите ли вы просто закрепить определенное сообщение на видном месте или создать удобную навигацию, липкий хедер — это отличное решение, которое будет полезным как для посетителей сайта, так и для его владельца.
В этой статье мы попытались описать самые интересные плагины, но если вы заметили, что мы что-то упустили, обязательно делитесь с нами своими замечаниями и советами в комментариях.