15 wtyczek jQuery do tworzenia inteligentnych elementów lepkich

Obecnie często obserwuje się pewne elementy w witrynie ustalone na pozycji podczas przewijania w górę lub w dół witryny, np. menu nawigacyjne, nagłówek lub pasek boczny. Dzięki temu element jest łatwo dostępny niezależnie od pozycji użytkownika.

Nazywany elementem lepkim, można to osiągnąć tylko za pomocą CSS, jednak dzięki tej metodzie efekt nie jest niezawodny w wielu przeglądarkach. Dlatego stworzyliśmy kilka bibliotek JS i wtyczek jQuery, które pozwolą Ci osiągnąć ten konkretny projekt UX z niewielkim lub żadnym problemem.

1. Punkty trasy

Waypointy to biblioteka do wykonywania funkcji na podstawie pozycji elementu w rzutni. Jest wyposażony w funkcję skrótu, która sprawia, że ​​ten element “lepki”. Możesz dostosować kierunek przewijania - w górę, na dół, i nawet dobrze i lewo - co do tego, który element powinien trzymać się w rzutni.

• Zależność: None / jQuery (opcjonalnie)
• Licencja: Licencja MIT

2. Zestaw samoprzylepny

Z StickyKit, nie tylko możesz sprawić, że element wpasuje się w rzutnię, ale możesz również sprawić, by trzymały się one wewnątrz elementu nadrzędnego, który wyznaczyłeś dla wielu elementów jednocześnie. Wtyczka zawiera również zaawansowane ustawienia, w tym niestandardowe zdarzenia i wyzwalacze.

• Zależność: jQuery
• Licencja: WTFPL

3. StickyJS

StickyJS to łatwa w użyciu, lepka wtyczka jQuery, która robi to, co mówi. Wtyczka działa po wyjęciu z pudełka. Jeśli jednak potrzebujesz pewnych dostosowań, otrzymasz opcje / ustawienia, niestandardowe metody i zdarzenia.

• Zależność: jQuery
• Licencja: Licencja MIT

4. HeadRoom

Lepki nagłówek witryny zajmie cenną przestrzeń w pionie, która ma znaczenie, gdy przeglądasz witrynę na telefonie komórkowym. Headroom to biblioteka JavaScript, która sprawi, że Twój lepki nagłówek będzie inteligentny; nagłówek zostanie ukryty, gdy użytkownicy przewiną stronę w dół i pojawią się po przewinięciu w górę.

• Zależność: Brak / jQuery (opcjonalnie) / Angular (opcjonalnie)
• Licencja: Licencja MIT

5. MakefixedJS

Makefixed pozwala na dynamiczne naprawianie elementów podczas przewijania strony przez użytkowników. Po prostu zadzwoń makeFixed () funkcja na elemencie, który chcesz naprawić. Sprawdź wersję demonstracyjną, aby zobaczyć ją w akcji.

• Zależność: jQuery
• Licencja: GPL

6. MidnightJS

Północ pozwala na przyklejenie wielu nagłówków / elementów i przełączanie się między nimi w zależności od ich pozycji w dokumencie (drzewo DOM), sprawdź demo, aby zobaczyć, co mam na myśli. Dodatkowo możesz zmienić ich kolor w locie, po prostu dodając północ-data atrybut o podanej nazwie koloru.

• Zależność: jQuery
• Licencja: Licencja MIT

7. ScrollMagic

ScrollMagic ma zaawansowane funkcje do dodawania interakcji podczas przewijania strony. Możesz przypinać elementy z określonych pozycji przewijania, dodawać animacje na podstawie pozycji przewijania lub nawet wywoływać niesamowity efekt paralaksy. Demo daje wgląd w to, co ta wtyczka może zrobić.

• Zależność: jQuery / Velocity.js
• Licencja: Podwójna licencja (MIT i GPL)

8. onScreen

na ekranie jest podobny do Waypointów - pozwala na wykonywanie funkcji, gdy element wchodzi, opuszcza lub osiąga pewne pozycje w oknie przeglądarki.

• Zależność: jQuery
• Licencja: Licencja MIT

9. jQuery Pin

jQuery Pin to mała wtyczka jQuery do “kołek” lub “odpiąć” elementy do pozycji, gdy przewijasz stronę. Moją ulubioną częścią tej wtyczki jest opcja wyłączenia jej w pewnych szerokościach rzutni.

• Zależność: jQuery
• Licencja: Licencja BSD

10. Lepki pływak

Lepki Pływak pozwala nam nadać elementom stałą pozycję w stosunku do rodzica. Możesz ustawić lepką opcję zgodnie z własnymi potrzebami za pomocą podanych parametrów i zmieniając wartość. Złap demo tutaj.

• Zależność: jQuery
• Licencja: Niezdefiniowany

11. Zebra Pin

Pinezka Zebry jest lekką wtyczką do umieszczenia dowolnego elementu w pojemniku. Dzięki tej wtyczce możesz dodać “lepkość” do elementów w projekcie, takich jak nawigacja, paski boczne, nagłówki i stopki, lub innych elementów, które chcesz zachować, gdy użytkownicy przewijają w dół. Sprawdź demo.

• Zależność: jQuery
• Licencja: Licencja GPL

12. HC-Sticky

Z HC-Sticky, możesz tworzyć lepkie elementy, które odnoszą się do jego kontenera, dowolnego elementu lub samego dokumentu. Ta wtyczka ma kilka opcji, które możesz dostosować do swoich potrzeb, takich jak odległość od góry i dołu, aby rozpocząć płynięcie, i inne opcje.

• Zależność: jQuery
• Licencja: Licencja MIT

13. Lepkie Mojo

Lepkie Mojo to lekka, szybka i elastyczna wtyczka jQuery do tworzenia niesamowitych lepkich elementów. Jest kompatybilny z nowoczesnymi przeglądarkami i będzie się ładnie degradował w IE.

• Zależność: jQuery
• Licencja: Licencja MIT

14. Lepki pasek nawigacyjny

Jeśli chcesz, aby nawigacja po jednej stronie trzymała się podczas przewijania w dół, ta biblioteka jest dla Ciebie.Sticky Navbar umieści nawigację w górnej części okna przeglądarki i podświetli link kotwicy, aby połączyć się z odpowiednią sekcją na stronie. Możesz również dodać Animate.css, aby upiększyć efekt nawigacji.

• Zależność: jQuery
• Licencja: Licencja MIT

15. StickyStack

StickyStack sprawi, że elementy będą układane razem z innymi, gdy użytkownicy przewijają element i docierają do górnej części rzutni. Dzięki tej bibliotece Twoja długa strona zmieni się w ułożone karty.

• Zależność: jQuery
• Licencja: Niezdefiniowany