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

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

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

1. Путевые точки

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

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

2. Липкий комплект

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

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

3. StickyJS

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

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

4. HeadRoom

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

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

5. MakefixedJS

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

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

6. MidnightJS

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

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

7. ScrollMagic

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

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

8. на экране

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

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

9. JQuery Pin

JQuery Pin небольшой плагин JQuery для “штырь” или же “откалывать” элементы в положение, когда вы прокручиваете страницу. Моя самая любимая часть этого плагина - это возможность отключить его при определенной ширине области просмотра.

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

10. Липкий Поплавок

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

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

11. Зебра Пин

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

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

12. HC-Sticky

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

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

13. Липкий Моджо

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

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

14. Липкий Навбар

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

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

15. StickyStack

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

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