Sticky Menu, Sticky Header (or anything!) on Scroll

Описание

Плагин WP Sticky Menu (или Sticky Header) On Scroll позволяет вам сделать любой элемент на ваших страницах «липким», как только он попадает в верхнюю часть страницы при прокрутке вниз. Хотя это обычно используется для закрепления меню в верхней части страницы для создания плавающих меню, плагин позволяет сделать любой элемент липким. Сделайте липкий заголовок, липкое меню, липкий виджет, липкий логотип, липкий призыв к действию или плавающее меню.

Требуется немного базовых знаний HTML/CSS. Вам просто нужно знать, как выбрать правильный селектор для элемента, который вы хотите сделать липким, и вы должны быть уверены, что это уникальный селектор. Иногда достаточно простого селектора, такого как «nav», «#main-menu», «.menu-main-menu-1». В других случаях вам придется быть точнее и использовать более конкретный селектор, напр. «header > ul:first-child» или «nav.top .menu-header ul.main». Если вам не нравится возиться в коде — посмотрите наш визуальный выбор элементов в WP Sticky PRO.

Возможности

  • Любой элемент можно закрепить: хотя обычно это используется для навигационных меню или хедера, плагин позволяе вам выбрать любой уникальный элемент с именем, классом или ID, чтобы закрепить его в верхней части страницы при прокрутке. Используйте это для липкого виджета, липкого сайдбара, липкого заголовка, липкого меню, липкого заголовка, липкого окна призыва к действию, липкой баннерной рекламы и т. д. Нужно сделать несколько липких элементов? Посмотрите WP Sticky PRO.
  • Позиционирование сверху: при желании вы можете добавить любое количество пространства между липким элементом и верхней частью страницы, чтобы элемент не всегда застревал на «потолке» страницы.
  • Включить только для определенных размеров экрана: дополнительно вы можете установить минимальный и/или максимальный размер экрана, где должна работать липкость. Это может быть удобно, если у вас есть адаптивный сайт, и вы, например, не хотите, чтобы ваш элемент был липким на небольших экранах.
  • Выталкивающий элемент: при желании вы можете выбрать любой другой элемент ниже на странице, который снова подтолкнет липкий элемент вверх (например, виджет сайдбара).
  • Наличие панели администратора: проверяет, есть ли у текущего пользователя панель администратора в верхней части страницы. Если это так, то липкий элемент не будет заслонять его (и не будет сам заслоняться им).
  • Z-index: если на странице есть другие элементы, которые скрывают или просматривают ваш липкий элемент, вы можете легко добавить Z-индекс.
  • Режим совместимости: в версии 2.0 был введен новый метод создания липких элементов. В режиме совместимости будет использоваться старый метод. Смотрите подробности в FAQ.
  • Динамический режим: некоторые проблемы, которые часто появляются в отзывчивых темах, были решены путем добавления динамического режима (только в режим совместимости). Для подробной информации перейдите в FAQ.
  • Режим отладки: узнайте возможные причины, по которым элемент не прилипает, переключившись на режим отладки, и сообщения об ошибках появятся в консоли браузера.

Скриншоты

  • Экран основных настроек липкого меню
  • Экран расширенных настроек липкого меню

Установка

  1. Загрузите «sticky-menu-or-anything» в свой каталог «wp-content/plugins».
  2. В панели администратора WordPress перейдите в раздел Плагины и активируйте «Sticky Menu (or Anything!)»
  3. Перейдите в НАСТРОЙКИ — STICKY MENU (OR ANYTHING!)
  4. Выберите элемент, который вы хотите сделать липким
  5. Вечеринка!

Часто задаваемые вопросы

Могу ли я сделать несколько элементов липкими?

Конечно, WP Sticky PRO имеет такую опцию. Вы можете сделать столько липких элементов, сколько захотите, и настроить параметры индивидуально для каждого элемента.

Я выбрал класс/ID на экране настроек, но элемент не прилипает, когда я прокручиваю вниз. Почему?

Во-первых, убедитесь, что если вы выбрали элемент по имени класса, то ему предшествует точка (напр,».main-menu»), а если вы выбираете его по ID, что ему предшествует решетка/номер (напр, «#main-menu»). Кроме того, убедитесь, что на странице есть только один элемент с селектором, который вы используете. Если нет ни одного элемента или элементов, соответствующего вашему селектору, более одного, то ничего не произойдет.

Как только элемент становится липким, он вообще не позиционируется/не имеет правильного размера.

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

  • отрицательный отступ (negative margins)
  • абсолютное позиционирование (absolute positioning)
  • свойства сверху/слева/снизу/справа
  • «display: inline»
  • «!important» применяется к любому из его свойств

Старайтесь избегать всего этого, где это возможно, но если не можете, то иногда помогает использование плагина в режиме совместимости (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.org и оставьте сообщение (включите ссылку на свой сайт, если это возможно).

Отзывы

27.11.2020
After purchasing WP Sticky I was having some issues with my theme and the customer service fixed everything for me so quickly! Highly recommend this plugin!
Посмотреть все 453 отзыва

Участники и разработчики

«Sticky Menu, Sticky Header (or anything!) on Scroll» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

Журнал изменений

2.25

  • 2020-10-16
  • Pro версия здесь
  • исправления и улучшения ошибок

2.23

  • 2020-10-01
  • больше исправлений CSS
  • добавлена промо кампания для WP 301 Redirects

2.22

  • 2020-09-08
  • улучшение для тем с правилом !important на полях вверху и слева внутри липкого элемента

2.21

  • 2020-06-19
  • исправление безопасности — спасибо Antony из Sucuri

2.2

  • 2020-02-01
  • исправление ошибок
  • незначительные GUI улучшения
  • 100,000 пользователей достигнуто 2020-01-31

2.1.1

  • Исправлена ошибка минификации

2.1

  • Липкий элемент имеет определенные классы для таргетирования липкого/нелипкого состояния: «.element-is-sticky» и «.element-is-not-sticky»

2.0.1

  • исправлена ошибка вычисления отступов (проценты отключаются при закреплении)
  • исправлена ошибка, когда назначенный цикл стилей вызывал JS ошибку

2.0

  • Введен новый улучшенный способ сделать элементы липкими
  • Добавлен режим совместимости (для тех, кто хочет продолжить работать в нем)
  • Разделить экран настроек на базовый и расширенный
  • В режиме отладки используется несжатый файл JS для упрощения удаленной отладки

1.4

  • Удалено уведомление об ошибке, если не выбран выталкивающий элемент
  • Переименование класса «cloned» на «sticky-element-cloned» и «original» на «sticky-element-original», чтобы избежать конфликтов с Owl Carousel
  • Исправлена ошибка, при которой ширина клонированного элемента округлялась вниз, если он содержал субпиксели

1.3.1

  • Исправлена незначительная ошибка для выталкивающего элемента

1.3

  • Добавлена функция перемещения липкого элемента вниз в случае наличия панели администратора в верхней части страницы
  • Добавлена функциональность для выталкивания липкого элемента вверх другим элементом ниже по странице

1.2.4

  • Исправлена небольшая ошибка, связанная с номером версии

1.2.3

  • Исправлена ошибка с окном выбора динамического режима
  • Исправлена ошибка с Z-индексом (спасибо @aguseo за сообщение)
  • Весь текст в плагине полностью переводим
  • Добавлена вкладка FAQ на экран настроек
  • Добавлен инфоблок на экран настроек
  • Добавлено несколько комментариев к исходному коду

1.2

  • Добавлен динамический режим (устранение проблем с динамически создаваемыми меню — Подробнее см. FAQ выше)

1.1.4

  • Готов к WordPress 4.1 (и TwentyFifteen)
  • Исправлена ошибка, когда у элемента есть отступы в процентах

1.1.3

  • Исправлена ошибка вычисления ширины, появившаяся в предыдущей версии (извините за это), теперь поддерживается изменение размера блока

1.1.2

  • Исправлена ошибка вычисления ширины элемента

1.1.1

  • Исправлена ошибка вычисления области просмотра

1.1

  • Добавлена функциональность для задания минимального/максимального размера экрана

1.0

  • Первоначальный выпуск (с использованием версии v1.1 автономного jQuery плагина)