15 jQuery-laajennukset, jotta voit tehdä älykkäitä tarroja

Nyt on yleistä nähdä tiettyjä sivustossa olevia elementtejä, jotka on kiinnitetty sijaintiin, kun selaat sivustoa ylös tai alas. navigointivalikko, otsikko tai sivupalkki. Tämä mahdollistaa sen, että elementti on helposti saatavilla käyttäjän sijainnista riippumatta.

Tätä kutsutaan tahmeaksi elementiksi, tämä voidaan saavuttaa vain käyttämällä CSS: ää, mutta tätä menetelmää käytettäessä vaikutus ei ole luotettava useissa selaimissa. Siksi olemme koonneet kourallisen JS-kirjastoja ja jQuery-laajennuksia, joiden avulla voit saavuttaa tämän erityisen UX-suunnittelun vain vähän tai ei ollenkaan..

1. Reittipisteet

Reittipisteet ovat kirjasto, joka suorittaa toiminnon elementin sijainnin perusteella. Sen mukana tulee pikavalintatoiminto, joka tekee tästä elementistä “tahmea”. Voit muokata vierityssuuntaa - ylös, alas, ja jopa oikea ja vasen - jonka mukaan elementin tulisi olla näkymän sisällä.

• riippuvuus: Ei mitään / jQuery (valinnainen)
• lisenssi: MIT-lisenssi

2. Sticky Kit

Kanssa StickyKit, et vain voi tehdä elementin kiinni näkymänäkymässä, mutta voit myös tehdä niistä kiinni vanhemmassa elementissä, jonka valitset useille elementeille kerralla. Pluginissa on myös joitakin lisäasetuksia, kuten mukautettuja tapahtumia ja käynnistimiä.

• riippuvuus: jQuery
• lisenssi: WTFPL

3. StickyJS

StickyJS on helppokäyttöinen jQuery-tahmea plugin, joka tekee mitä sanoo. Plugin toimii ulos laatikosta. Kuitenkin, jos tarvitset mukautuksia, se sisältää Asetukset / Asetukset, Mukautetut menetelmät ja Tapahtumat.

• riippuvuus: jQuery
• lisenssi: MIT-lisenssi

4. HeadRoom

Sticky site header vie arvokasta pystysuoraa tilaa, joka vaikuttaa, kun tarkastelet sivustoa mobiililaitteissa. sisäkorkeus on JavaScript-kirjasto, joka tekee tahmea otsikon älykkääksi; otsikko piilotetaan, kun käyttäjät selaavat sivua alaspäin ja näkyvät ylöspäin vieritettäessä.

• riippuvuus: Ei mitään / jQuery (valinnainen) / Kulma (valinnainen)
• lisenssi: MIT-lisenssi

5. MakefixedJS

Makefixed voit tehdä elementtejä dynaamisesti, kun käyttäjät selaavat sivua. Soita vain makeFixed () toiminto haluamallasi elementillä. Katso demo nähdäksesi sen toiminnassa.

• riippuvuus: jQuery
• lisenssi: GPL

6. MidnightJS

keskiyö voit kiinnittää useita otsikoita / elementtejä ja vaihtaa niiden välillä asiakirjan sijainnin perusteella (DOM-puu), tutustu demoon nähdäksesi mitä tarkoitan. Lisäksi voit vaihtaa väriä lennolla yksinkertaisesti lisäämällä data-puolenyön määrite, jossa on määritetty värin nimi.

• riippuvuus: jQuery
• lisenssi: MIT-lisenssi

7. ScrollMagic

ScrollMagic sisältää lisäominaisuuksia vuorovaikutuksen lisäämiseksi sivun vierityksen aikana. Voit liittää elementtejä tietyistä vierityspisteistä, lisätä animaation vierityspisteen perusteella tai jopa tehdä mahtavan parallaksivaikutuksen. Demo antaa sinulle oivalluksia siitä, mitä tämä plugin voi tehdä.

• riippuvuus: jQuery / Velocity.js
• lisenssi: Dual License (MIT ja GPL)

8. Kuvaruutuun

näytöllä on samanlainen kuin reittipisteet - sen avulla voit suorittaa toimintoja, kun elementti saapuu, poistuu tai saavuttaa tiettyjä paikkoja selaimen näkymänäkymässä.

• riippuvuus: jQuery
• lisenssi: MIT-lisenssi

9. jQuery Pin

jQuery Pin on pieni jQuery-laajennus “tappi” tai “irrottaa” elementtejä kohtaan, kun selaat sivua. Suosituin osa tätä laajennusta on mahdollisuus poistaa se tietyillä näkymänleveyksillä.

• riippuvuus: jQuery
• lisenssi: BSD-lisenssi

10. Sticky Float

Sticky Float antaa meille mahdollisuuden antaa elementteille kiinteä asema, joka on suhteessa sen vanhempaan. Voit asettaa tahmean vaihtoehdon tarpeitasi mukaan annetuilla parametreilla ja muuttamalla arvoa. Catch demo täällä.

• riippuvuus: jQuery
• lisenssi: määrittelemätön

11. Zebra Pin

Zebra Pin on kevyt plugin, joka tekee minkä tahansa elementin nastan säiliöön. Tämän lisäosan avulla voit lisätä “tahmea-ness” projektin elementteihin, kuten navigointiin, sivupalkkeihin, otsikoihin ja alatunnisteisiin tai muihin elementteihin, joita haluat pitää näkyvissä, kun käyttäjät selaavat alas. Tutustu demoon.

• riippuvuus: jQuery
• lisenssi: GPL-lisenssi

12. HC-Sticky

Kanssa HC-Sticky, voit tehdä tahmeita elementtejä, jotka viittaavat sen säiliöön, mihin tahansa tiettyyn elementtiin tai itse asiakirjaan. Tässä laajennuksessa on joitakin vaihtoehtoja, joita voit mukauttaa tarpeisiisi, kuten etäisyyttä ylä- ja alareunasta, jotta voit aloittaa kelluvan, ja muita vaihtoehtoja.

• riippuvuus: jQuery
• lisenssi: MIT-lisenssi

13. Sticky Mojo

Sticky Mojo on kevyt, nopea ja joustava jQuery-laajennus, joka tekee mahtavia tahmeita elementtejä. Se on yhteensopiva nykyaikaisen selaimen kanssa ja heikkenee kauniisti IE: ssä.

• riippuvuus: jQuery
• lisenssi: MIT-lisenssi

14. Sticky Navbar

Jos haluat tehdä yhden sivun navigoinnin, joka tarttuu alaspäin, tämä kirjasto on sinua varten.Sticky Navbar siirtää navigoinnin selainikkunan yläreunaan ja korosta ankkurilinkki, joka muodostaa yhteyden sivun vastaavaan osaan. Voit myös lisätä Animate.css: n kaunistamaan navigointivaikutusta.

• riippuvuus: jQuery
• lisenssi: MIT-lisenssi

15. StickyStack

StickyStack tekee elementtien pinon toiselle, kun käyttäjä selaa elementtiä ja saavuttaa näyttöruudun yläreunan. Tämän kirjaston avulla pitkä sivu muuttuu pinotuksi kortiksi.

• riippuvuus: jQuery
• lisenssi: määrittelemätön