JQuery plugin Sticky - елегантний та оригінальний плагін залипання віджетів - Сайт Земскова Іллі
Плагін частково повторює можливості аналогічних jquery-розробок, але має і свої відмінні риси. Зокрема:
- плагін вміє «залипати» блоки двома різними візуальними способами («залипати після промотки всіх блоків сайдбара за кордон екрана » і «залипити безпосередньо на межі залипання »);
- плагін вміє "залипати" горизонтальне меню в шапці сайту, навіть якщо воно спочатку не було призначене для цього;
- плагін вміє відключати свою роботу на низьких дозволах екрану;
- плагін вміє красиво «залипати» розкидану по сайдбару групу віджетів (якщо віджетів кілька, то залипання всіх віджетів крім останнього здійснюється тільки на висоту віджету, що залипає - після промотки сторінки далі, ніж висота залиплого віджета, він «розлипає» і тим самим передає естафетну можливість залипнути наступному потрібному віджету в сайдбарі);
- плагін вміє використовувати додатковий CSS-стиль для стану «залип»;
- плагін вміє виконувати callback-функції при зміні стану (залип/розлип).
Встановлення та налаштування
Установка проста та стандартна для jquery-плагінів: підключаєте останню версію jQuery і після нього вже сам скриптjquery.sticky.min.js. Виклик плагіна – теж простий:
При такому виклику Sticky плагін буде використовуватись для параметрів значення за замовчуванням. Якщо вам потрібно змінити дефолтні настройки, то орієнтуйтеся на наступну таблицю параметрів плагіна (у таблиці «порожні» значення за промовчанням позначені прочерком «-»):
| topspacing | відступ (у пікселях) зверху при виведенні «віджету, що прилип» | 20 |
| stopper | селектор блоку, при досягненні верхньої межі якого віджет зупинятиметься та/або зникатиме | .footer |
| marginbottom | відступ (у пікселях) від нижньої межі сторінки, далі віджет не зможе «просунутися» | 150 |
| styler | class, який приписуватиметься блоку при залипанні (назву вказувати без крапки) | - |
| unlockwidth | змушує «розблокувати» ширину блоку, що прилип (тобто не зберігати вихідну ширину блоку). Для активації вкажіть true або 1. Параметр переважно застосовується при реалізації залипання горизонтального меню в шапці сайту. | false |
| animduration | тривалість анімації при способі залипання afterall. Для вимкнення анімації вкажіть «0» | 500 |
| sticktype | спосіб ("тип") залипання. Доступно три значення:afterall,alonemenu,directly. Ось опис типів: |
- При способі «afterall» віджет виявлятиметься лише після того, як усі віджети сайдбару підуть за верхню межу екрана.
- Щоб блок залипав відразу і не чекав зникнення з екрана останнього віджету, вкажіть «directly».
- Значення "alonemenu" призначене тільки для роботи з горизонтальним меню в шапці і призводить до залипання блоку при першому торканні верхньої межі екрана верхньої межі блоку.
Демонстрація роботи
Подивитися приклад роботи плагіна можна тут 1008 . У ньому реалізована одночасно робота всіх доступних способів залипання - для меню, для «після всіх» і для «залипати відразу». Код виклику плагіна для демонстрації такий:
Думаю, що на основі наведеного вище коду ви відносно просто зможете налаштувати використання плагіну на своєму сайті. Якщо раптом не вдасться досягти бажаного ефекту «з коробки» - не впадайте у відчай! Можливо вам лише потрібно трохи модернізувати використовувані css-стилі (зокрема для опції styler) та/або активніше використовувати можливості callback-функцій (там доступні будь-які маніпуляції з DOM, що дозволить виправити будь-які огріхи html-верстки, що заважають роботі). Пробуйте, експериментуйте і нехай прибуде з вами сила!
Завантажити - free download
Коротка інформація про поточну версію плагіна: