15 „JQuery“ papildiniai, skirti „Smart Sticky Elements“

Dabar, kai slinkite aukštyn arba žemyn, pvz., naršymo meniu, antraštę arba šoninę juostą. Tai leidžia elementui lengvai gauti, nepaisant vartotojo padėties.

Tai vadinama lipni elementu, tai galima pasiekti tik naudojant CSS, tačiau naudojant šį metodą efektas nėra patikimas keliose naršyklėse. Štai kodėl mes sudėjome saują JS bibliotekų ir jQuery įskiepių, kurie leis jums pasiekti šį konkretų UX dizainą be jokio vargo..

1. Kelio taškai

Kelio taškai yra biblioteka, kuri atlieka funkciją pagal elemento poziciją peržiūros srityje. Jis ateina su sparčiųjų funkcijų, kurios daro šį elementą “lipnus”. Galite tinkinti slinkties kryptį - aukštyn, žemyn, Ir netgi teisė ir kairėje - kaip elementas turi laikytis per peržiūros sritį.

• Priklausomybė: Nėra / jQuery (neprivaloma)
• Licencija: MIT licencija

2. Lipnus rinkinys

Su StickyKit, ne tik jūs galite padaryti elementą laikydamiesi peržiūros lange, bet taip pat galite juos laikyti tame pačiame tėvų elemente, kurį vienu metu nurodote keliems elementams. Įskiepis taip pat yra su kai kuriais papildomais nustatymais, įskaitant pasirinktinius įvykius ir trigerius.

• Priklausomybė: jQuery
• Licencija: WTFPL

3. „StickyJS“

StickyJS yra paprastas naudoti jQuery lipnus įskiepis, kuris daro tai, ką jis sako. Įskiepis veikia iš dėžutės. Tačiau, jei jums reikia tam tikro pritaikymo, tai yra parinktys / nustatymai, individualūs metodai ir įvykiai.

• Priklausomybė: jQuery
• Licencija: MIT licencija

4. HeadRoom

Lipnus svetainės antraštė užims vertingą vertikalią erdvę, kuri daro įtaką, kai peržiūrite svetainę mobiliajame telefone. Galvos aukštis yra „JavaScript“ biblioteka, kuri padarys jūsų lipnią antraštę protingą; antraštė bus paslėpta, kai naudotojai slenka žemyn puslapiu ir rodomi po slinkties aukštyn.

• Priklausomybė: Nėra / jQuery (pasirinktinai) / kampinis (neprivaloma)
• Licencija: MIT licencija

5. MakefixedJS

Pakeistas leidžia vartotojams nustatyti elementus dinamiškai, kai vartotojai slenka puslapį. Tiesiog paskambinkite makeFixed () funkcija, kurią norite nustatyti. Patikrinkite demonstraciją, kad pamatytumėte, kaip veikia.

• Priklausomybė: jQuery
• Licencija: GPL

6. MidnightJS

Vidurnaktis leidžia jums klijuoti kelis antraštes / elementus ir persijungti tarp jų pagal jų padėtį dokumente (DOM medis), patikrinkite demonstraciją, kad pamatytumėte, ką turiu galvoje. Be to, galite pakeisti savo spalvą skristi tiesiog pridėdami duomenys - vidurnakčio atributas su nurodytu spalvos pavadinimu.

• Priklausomybė: jQuery
• Licencija: MIT licencija

7. ScrollMagic

ScrollMagic turi papildomų funkcijų, leidžiančių pridėti sąveiką puslapio slinkimo metu. Galite susieti elementus iš konkrečių slinkties pozicijų, pridėti animaciją, pagrįstą slinkties padėtimi, arba net padaryti nuostabų paralakso efektą. Demonstracija suteikia jums tam tikrų įžvalgų apie tai, ką šis papildinys gali padaryti.

• Priklausomybė: jQuery / Velocity.js
• Licencija: Dual License (MIT ir GPL)

8. Ekranas

ekrane yra panašus į kelio taškus - tai leidžia atlikti funkcijas, kai elementas įeina, palieka arba pasiekia tam tikras pozicijas naršyklės peržiūros lange.

• Priklausomybė: jQuery
• Licencija: MIT licencija

9. jQuery Pin

jQuery Pin yra mažas jQuery įskiepis “kaištis” arba “atsukite” elementus į poziciją, kai slinkite puslapį. Mano mėgstamiausia šio įskiepio dalis yra galimybė išjungti tam tikrus peržiūros sritį.

• Priklausomybė: jQuery
• Licencija: BSD licencija

10. Lipni plūdė

Lipni plūdė leidžia mums pateikti elementus fiksuotai pozicijai, kuri yra jos tėvui. Lipniąją parinktį galite nustatyti pagal savo poreikius pateiktais parametrais ir keičiant vertę. Sugavimo demo čia.

• Priklausomybė: jQuery
• Licencija: Neapibrėžtas

11. Zebra kaištis

Zebra kaištis yra lengvas įskiepis, kad bet koks elementas taptų prie konteinerio. Su šiuo papildiniu galite pridėti “lipnumas” į savo projekto elementus, pavyzdžiui, į navigaciją, šonines juostas, antraštes ir poraštes arba kitus elementus, kuriuos norite matyti, kai vartotojai slenka žemyn. Patikrinkite demonstraciją.

• Priklausomybė: jQuery
• Licencija: GPL licencija

12. HC-Sticky

Su HC-Sticky, galite padaryti lipnius elementus, kurie nurodo jo talpyklą, bet kurį tam tikrą elementą arba patį dokumentą. Šiame papildinyje yra keletas parinkčių, kurias galite pritaikyti prie savo poreikio, pvz., Atstumą nuo viršaus ir apačios, kad pradėtumėte plaukti, ir kitas parinktis.

• Priklausomybė: jQuery
• Licencija: MIT licencija

13. Lipni Mojo

Lipni Mojo yra lengvas, greitas ir lankstus „jQuery“ įskiepis, kuris suteikia nuostabų lipnių elementų. Tai suderinama su šiuolaikinėmis naršyklėmis, o IE bus griaunama.

• Priklausomybė: jQuery
• Licencija: MIT licencija

14. Lipni juosta

Jei norite atlikti vieno puslapio naršymą, kuris paspaudžiamas, kai slinkite žemyn, ši biblioteka yra skirta jums.Lipni juosta įkelia naršyklę naršyklės lango viršuje ir pažymėsite saitą, skirtą prisijungti prie atitinkamo puslapio puslapio. Taip pat galite pridėti „Animate.css“, kad pagražintumėte navigacijos efektą.

• Priklausomybė: jQuery
• Licencija: MIT licencija

15. „StickyStack“

„StickyStack“ elementai sukraunami su kitu, kai vartotojai slenka elementą ir pasiekia peržiūros srities viršų. Su šia biblioteka jūsų ilgas puslapis bus paverstas į sukrautas korteles.

• Priklausomybė: jQuery
• Licencija: Neapibrėžtas