15 плагинов jQuery для создания умных липких элементов

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

Названный липким элементом, это может быть достигнуто просто с помощью CSS, однако, при использовании этого метода, эффект не надежен во многих браузерах. Вот почему мы собрали несколько библиотек JS и плагинов jQuery, которые позволят вам реализовать этот конкретный дизайн UX практически без хлопот.
1. Waypoints
Маршрутные точки – это библиотека для выполнения функции на основе позиции элемента в области просмотра. Это поставляется с функцией быстрого доступа это делает этот элемент «липким». Вы можете настроить направление прокрутки – вверх, вниз и даже вправо и влево – относительно того, какой элемент должен придерживаться в области просмотра.

• Зависимость: нет / jQuery (необязательно)
• Лицензия: лицензия MIT

2. Липкий комплект
С помощью StickyKit вы можете не только прикрепить элемент в окне просмотра, но и прикрепить его к родительскому элементу, назначенному нескольким элементам одновременно. Плагин также поставляется с некоторые расширенные настройки включая пользовательские события и триггеры.

• Зависимость: jQuery
• Лицензия: WTFPL

3. StickyJS
StickyJS – это простой в использовании липкий плагин jQuery, который делает то, что говорит. Плагин работает из коробки. Тем не менее, если вам нужна некоторая настройка, она поставляется с опциями / настройками, пользовательскими методами и событиями.

• Зависимость: jQuery
• Лицензия: лицензия MIT

4. HeadRoom
Липкий заголовок сайта займет ценное вертикальное пространство, которое имеет значение при просмотре сайта на мобильном телефоне. Headroom – это библиотека JavaScript, которая сделает ваш липкий заголовок умным; заголовок будет скрыт, когда пользователи прокручивают страницу вниз и отображаются при прокрутке вверх.

• Зависимость: Нет / jQuery (необязательно) / Angular (необязательно)
• Лицензия: лицензия MIT

5. MakefixedJS
Makefixed позволяет вам динамически фиксировать элементы, когда пользователи прокручивают страницу. Просто вызовите функцию makeFixed () для элемента, который вы хотите исправить. Проверить демонстрация чтобы увидеть это на деле.

• Зависимость: jQuery
• Лицензия: GPL

6. MidnightJS
Midnight позволяет вам прикрепить несколько заголовков / элементов и переключаться между ними в зависимости от их положения в документе (дерево DOM). демонстрация чтобы понять, что я имею в виду. Кроме того, вы можете изменить их цвет на лету, просто добавив атрибут data-midnight с указанным именем цвета.

• Зависимость: jQuery
• Лицензия: лицензия MIT

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

• Зависимость: jQuery / Velocity.js
• Лицензия: Двойная лицензия (MIT и GPL)

8. на экране
Функция onScreen аналогична путевым точкам – она ​​позволяет выполнять функции при входе, выходе или достижении определенных позиций в окне просмотра браузера.

• Зависимость: jQuery
• Лицензия: лицензия MIT

9. JQuery Pin
jQuery Pin – это небольшой плагин jQuery для «закрепления» или «открепления» элементов в позиции при прокрутке страницы. Моя самая любимая часть этого плагина – это возможность отключить его при определенной ширине области просмотра.
10. Липкий Поплавок
Sticky Float позволяет нам дать элементам фиксированное положение относительно его родителя. Вы можете установить липкий вариант в соответствии с вашими потребностями с помощью предоставленных параметров и путем изменения значения. Поймать демо Вот,

• Зависимость: jQuery
• Лицензия: Неопределенный

11. Зебра
Zebra Pin – это легкий плагин, позволяющий прикрепить любой элемент к своему контейнеру. С помощью этого плагина вы можете добавить «прилипаемость» к элементам вашего проекта, таким как навигация, боковые панели, верхние и нижние колонтитулы или другие элементы, которые вы хотите оставить видимыми при прокрутке пользователя вниз. Проверьте демонстрация,

• Зависимость: jQuery
• Лицензия: лицензия GPL

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

• Зависимость: jQuery
• Лицензия: лицензия MIT

13. Липкий Моджо
Sticky Mojo – это легкий, быстрый и гибкий плагин jQuery для создания удивительных липких элементов. Он совместим с современными браузерами и будет изящно ухудшаться в IE.

• Зависимость: jQuery
• Лицензия: лицензия MIT

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

• Зависимость: jQuery
• Лицензия: лицензия MIT

15. StickyStack
StickyStack заставит элементы складываться друг с другом, когда пользователи прокрутят элемент и достигнут вершины области просмотра. С этой библиотекой ваша длинная страница превратится в сложенные карточки.

• Зависимость: jQuery
• Лицензия: Неопределенный