15 плъгини jQuery за създаване на интелигентни лепкави елементи

Сега обикновено се виждат определени елементи в даден сайт, фиксирани в позиция, когато превъртате нагоре или надолу по сайта, напр. навигационното меню, заглавката или страничната лента. Това позволява елемента да бъде лесно достъпен, независимо от позицията на потребителя.

Наричан лепкав елемент, това може да се постигне само с помощта на CSS, но като се използва този метод, ефектът не е надежден в множество браузъри. Ето защо сме събрали няколко JS библиотеки и jQuery плъгини, които ще ви позволят да постигнете този UX дизайн с малко или никакви проблеми.

1. Точки

Waypoints е библиотека за изпълнение на функция въз основа на позицията на елемента в екрана. Той идва с функция за пряк път, който прави този елемент “лепкав”. Можете да персонализирате посоката на превъртане - нагоре, надолу, и дори прав и наляво - към кой елемент трябва да се залепи прозореца.

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

2. Sticky Kit

с 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

jQuery Pin е малък jQuery плъгин към “щифт” или “изваждам” елементи в позиция, когато превъртате страницата. Най-любимата ми част от този плъгин е възможността да я деактивирате при определени ширини на екрана.

• Зависимост: jQuery
• Разрешително: BSD лиценз

10. Залепваща плувка

Sticky Float ни позволява да дадем на елементите фиксирана позиция, която е относителна спрямо неговия родител. Можете да зададете опцията лепкава според вашите нужди с предоставените параметри и чрез промяна на стойността. Хвани демото тук.

• Зависимост: jQuery
• Разрешително: неопределен

11. Zebra Pin

Зебра Пин е лек плъгин, който прави всеки щифт за елемент в контейнера. С този плъгин можете да добавите “лепкава-ност” към елементи във вашия проект, като навигация, странични ленти, колонтитули или други елементи, които искате да останете видими, когато потребителите превъртат надолу. Вижте демото.

• Зависимост: jQuery
• Разрешително: Лиценз за GPL

12. HC-Sticky

с HC-Sticky, можете да създавате лепкави елементи, които се отнасят за неговия контейнер, за всеки даден елемент или за самия документ. Този плъгин има някои опции, които можете да настроите според нуждите си, като например разстоянието от горната и долната част, за да започнете плаването, и други опции.

• Зависимост: jQuery
• Разрешително: Лиценз за MIT

13. Залепваща Mojo

Прилепва Mojo е лек, бърз и гъвкав jQuery плъгин, който прави страхотни лепкави елементи. Той е съвместим с модерни браузъри и ще се влоши грациозно в IE.

• Зависимост: jQuery
• Разрешително: Лиценз за MIT

14. Липсва Navbar

Ако искате да направите навигация на една страница, която се придържа, когато се превърта надолу, тази библиотека е за вас.Sticky Navbar ще постави навигацията в горната част на прозореца на браузъра и ще маркира връзката за свързване, за да се свърже със съответния раздел на страницата ви. Можете също да добавите Animate.css за разкрасяване на навигационния ефект.

• Зависимост: jQuery
• Разрешително: Лиценз за MIT

15. StickyStack

StickyStack ще накара елементите да се натрупват с други, когато потребителите превъртат елемента и стигнат до горната част на прозореца. С тази библиотека дългата ви страница ще се превърне в подредени карти.

• Зависимост: jQuery
• Разрешително: неопределен