15 Плагіни jQuery для створення смарт-стикових елементів

Тепер зазвичай видно, що певні елементи на сайті закріплені за позицією, коли ви прокручуєте сайт вгору або вниз, наприклад, навігаційне меню, заголовок або бічну панель. Це дозволяє елементу бути легко доступним незалежно від положення користувача.

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

1. Точки

Waypoints - це бібліотека для виконання функції на основі позиції елемента в області перегляду. Він поставляється з функцією швидкого доступу, що робить цей елемент “липкий”. Ви можете налаштувати напрямок прокручування - вгору, вниз, і навіть право і зліва - до якого елемента слід дотримуватися в області перегляду.

• Залежність: Немає / jQuery (необов'язково)
• Ліцензія: Ліцензія MIT

2. Важкий комплект

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

• Залежність: jQuery
• Ліцензія: WTFPL

3. StickyJS

StickyJS це простий у використанні JQuery липкий плагін, який робить те, що він говорить. Плагін працює з коробки. Проте, якщо вам потрібна певна настройка, вона поставляється з опціями / налаштуваннями, користувацькими методами та подіями.

• Залежність: jQuery
• Ліцензія: Ліцензія MIT

4. HeadRoom

Липкий заголовок сайту займе цінне вертикальне простір, що має значення, коли ви переглядаєте сайт на мобільному телефоні. Вгору - це бібліотека JavaScript, яка зробить вашу липкий заголовок розумним; заголовок буде приховано, коли користувачі прокрутять сторінку вниз і з'являться після прокрутки.

• Залежність: Немає / jQuery (необов'язково) / кутовий (необов'язково)
• Ліцензія: Ліцензія MIT

5. MakefixedJS

Makefixed дозволяє вам динамічно фіксувати елементи, коли користувачі прокручують сторінку. Просто зателефонуйте makeFixed () функція елемента, який потрібно виправити. Перевірте демонстрацію, щоб побачити її на дію.

• Залежність: jQuery
• Ліцензія: GPL

6. MidnightJS

Північ дозволяє вставляти декілька заголовків / елементів і перемикатися між ними на основі їхньої позиції в документі (дерево DOM), ознайомтеся з демонстрацією, щоб дізнатися, що я маю на увазі. Крім того, ви можете змінити їх колір на льоту просто, додавши дані-опівночі атрибут із зазначеним ім'ям кольору.

• Залежність: jQuery
• Ліцензія: Ліцензія MIT

7. ScrollMagic

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

• Залежність: jQuery / Velocity.js
• Ліцензія: Подвійна ліцензія (MIT і GPL)

8. На екрані

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

• Залежність: jQuery
• Ліцензія: Ліцензія MIT

9. JQuery Pin

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

• Залежність: jQuery
• Ліцензія: Ліцензія BSD

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

Липкий поплавок дозволяє надати елементам фіксовану позицію, яка є відносно її батьківської. Ви можете встановити опцію sticky у відповідності з вашими потребами за допомогою наданих параметрів і змінити значення. Спіймати демо тут.

• Залежність: jQuery
• Ліцензія: Не визначено

11. Zebra Pin

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

• Залежність: jQuery
• Ліцензія: Ліцензія GPL

12. HC-Sticky

С HC-Sticky, Ви можете робити липкі елементи, які посилаються на його контейнер, на будь-який даний елемент або на сам документ. Цей плагін має деякі параметри, які ви можете налаштувати відповідно до ваших потреб, наприклад, відстань від верхньої та нижньої частин, щоб почати плавати, та інші параметри.

• Залежність: jQuery
• Ліцензія: Ліцензія MIT

13. Липкі Mojo

Липкі Mojo це легкий, швидкий і гнучкий плагін jQuery для створення чудових липких елементів. Він сумісний з сучасними браузерами і граціозно деградує в IE.

• Залежність: jQuery
• Ліцензія: Ліцензія MIT

14. Важлива навігаційна панель

Якщо ви хочете зробити навігацію однією сторінкою, яка стирчить, коли прокручується вниз, ця бібліотека для вас.Sticky Navbar розмістить навігацію у верхній частині вікна веб-переглядача та виділить прив'язку, щоб підключитися до відповідного розділу вашої сторінки. Ви також можете додати Animate.css, щоб прикрасити ефект навігації.

• Залежність: jQuery
• Ліцензія: Ліцензія MIT

15. StickyStack

StickyStack зробить елементи стека з іншим, коли користувачі прокрутять елемент і досягнуть верхньої частини області перегляду. За допомогою цієї бібліотеки ваша довга сторінка перетвориться на карти з накопиченням.

• Залежність: jQuery
• Ліцензія: Не визначено