15 jQuery Pluginy pro vytvoření inteligentních lepkavých prvků

Nyní je běžné vidět určité prvky na webu, které jsou pevně nastaveny na pozici při posouvání stránky nahoru nebo dolů, např. v navigačním menu, záhlaví nebo postranním panelu. To umožňuje, aby byl prvek snadno dostupný bez ohledu na polohu uživatele.

Toto pojmenované lepkavý prvek může být dosaženo jen pomocí CSS, avšak při použití této metody není tento efekt spolehlivý napříč mnoha prohlížeči. Proto jsme sestavili několik knihoven JS a plug-inů jQuery, které vám umožní tento konkrétní design UX dosáhnout s malými až žádnými problémy..

1. Trasové body

Trasové body jsou knihovna, která provádí funkci na základě pozice prvku ve výřezu. Dodává se s funkcí zástupce, který tento prvek dělá “lepkavý”. Směr posouvání můžete přizpůsobit - nahoru, dolů, a dokonce že jo a vlevo, odjet - který prvek by měl ve výřezu držet.

• Závislost: None / jQuery (volitelné)
• Licence: Licence MIT

2. Lepící souprava

S StickyKit, Nejen, že můžete vytvořit prvek ve výřezu, ale můžete je také nalepit do rodičovského prvku, který označujete na více prvků najednou. Plugin také přichází s některými pokročilými nastaveními včetně vlastních událostí a spouštěčů.

• Závislost: jQuery
• Licence: WTFPL

3. StickyJS

StickyJS je snadno použitelný jQuery sticky plugin, který dělá to, co říká. Plugin funguje z krabice. Pokud však potřebujete nějaké přizpůsobení, přichází s volbami Možnosti / Nastavení, Vlastní metody a události.

• Závislost: jQuery
• Licence: Licence MIT

4. HeadRoom

Lepící záhlaví webu zabírá cenné vertikální prostor, který je rozdíl při zobrazení webu v mobilu. Světlá výška je JavaScript knihovna, která bude vaše lepkavé hlavičky inteligentní; záhlaví se skryje, když uživatelé posouvají stránku dolů a zobrazují se při rolování nahoru.

• Závislost: None / jQuery (volitelné) / Úhlové (volitelné)
• Licence: Licence MIT

5. MakefixedJS

Makefixed umožňuje, aby byly prvky dynamicky opravovány, jakmile uživatelé posouvají stránku. Stačí zavolat makeFixed () funkce na prvku, který chcete opravit. Podívejte se na ukázku a podívejte se na akci.

• Závislost: jQuery
• Licence: GPL

6. MidnightJS

Půlnoc umožňuje držet více záhlaví / prvků a přepínat mezi nimi na základě jejich pozice v dokumentu (DOM strom), podívejte se na demo, abyste viděli, co tím myslím. Kromě toho můžete změnit jejich barvu za letu jednoduše přidáním data-půlnoci atribut se zadaným názvem barvy.

• Závislost: jQuery
• Licence: Licence MIT

7. ScrollMagic

ScrollMagic má pokročilé funkce pro přidávání interakce během posouvání stránky. Můžete připevnit prvky ze specifických pozic posouvání, přidat animaci na základě pozice posouvání nebo dokonce vytvořit úžasný efekt paralaxy. Demo vám dává několik informací o tom, co tento plugin dokáže.

• Závislost: jQuery / Velocity.js
• Licence: Duální licence (MIT a GPL)

8. onScreen

na obrazovce je podobná trasovým bodům - umožňuje provádět funkce, jak prvek vstupuje, opouští nebo dosahuje určitých pozic ve výřezu prohlížeče.

• Závislost: jQuery
• Licence: Licence MIT

9. jQuery Pin

jQuery Pin je malý plugin jQuery “kolík” nebo “uvolnit” při posouvání stránky. Moje nejoblíbenější část tohoto pluginu je možnost zakázat ji v určitých šířkách zobrazení.

• Závislost: jQuery
• Licence: Licence BSD

10. Sticky Float

Sticky Float nám umožňuje dát elementům pevnou pozici, která je relativní k jeho rodiči. Sticky možnost můžete nastavit podle vašich potřeb s danými parametry a změnou hodnoty. Chytit demo zde.

• Závislost: jQuery
• Licence: Nedefinováno

11. Zebra Pin

Zebra Pin je lehký plugin, aby se každý prvek pin na jejich kontejneru. Pomocí tohoto pluginu můžete přidat “lepkavý” na prvky v projektu, jako je navigace, postranní lišty, záhlaví a zápatí, nebo jiné prvky, které chcete vidět, když se uživatelé posouvají dolů. Podívejte se na demo.

• Závislost: jQuery
• Licence: Licence GPL

12. HC-Sticky

S HC-Sticky, můžete vytvořit lepivé prvky, které odkazují na jeho kontejner, na daný prvek nebo na samotný dokument. Tento plugin má některé možnosti, které můžete přizpůsobit vašim potřebám, jako je vzdálenost od horního a dolního k zahájení plovoucí, a další možnosti.

• Závislost: jQuery
• Licence: Licence MIT

13. Sticky Mojo

Sticky Mojo je lehký, rychlý a flexibilní jQuery plugin, aby dělal úžasné lepkavé prvky. Je kompatibilní s moderními prohlížeči a bude ladit v IE.

• Závislost: jQuery
• Licence: Licence MIT

14. Sticky Navbar

Pokud chcete, aby se jedna stránka navigace, která drží, když se posouvá dolů, tato knihovna je pro vás.Sticky Navbar umístí navigaci do horní části okna prohlížeče a zvýrazní kotevní odkaz pro připojení k odpovídající části na stránce. Můžete také přidat Animate.css ke zkrácení efektu navigace.

• Závislost: jQuery
• Licence: Licence MIT

15. StickyStack

StickyStack Pokud uživatel posouvá prvek a dosáhne horní části výřezu, vytvoří prvky s dalšími prvky. S touto knihovnou se vaše dlouhá stránka přemění na skládané karty.

• Závislost: jQuery
• Licence: Nedefinováno