15 Plugin jQuery Untuk Membuat Unsur Sticky Pintar

Sekarang sudah biasa untuk melihat unsur-unsur tertentu di tapak yang ditetapkan ke kedudukan apabila anda menatal ke atas atau ke bawah tapak misalnya. menu navigasi, tajuk atau bar sisi. Ini membolehkan elemen sedia ada tanpa mengira kedudukan pengguna.

Disebut elemen melekit, ini boleh dicapai hanya dengan menggunakan CSS, bagaimanapun, menggunakan kaedah ini, kesannya tidak boleh dipercayai di beberapa pelayar. Itulah sebabnya kami telah mengumpulkan segenggam perpustakaan JS dan plugin jQuery yang akan membolehkan anda untuk mencapai reka bentuk UX tertentu dengan sedikit tanpa kerumitan.

1. Waypoints

Waypoints adalah perpustakaan untuk melaksanakan fungsi berdasarkan kedudukan elemen dalam viewport. Ia datang dengan fungsi pintasan yang menjadikan elemen itu “melekit”. Anda boleh menyesuaikan arah menatal - up, turun, dan juga betul dan ditinggalkan - yang mana unsur harus tetap dalam viewport.

• Ketergantungan: Tiada / jQuery (pilihan)
• Lesen: Lesen MIT

2. Sticky Kit

Dengan StickyKit, bukan sahaja anda boleh membuat elemen melekat dalam viewport, tetapi anda juga boleh menjadikannya tetap dalam unsur induk yang anda tetapkan kepada beberapa unsur sekaligus. Plugin ini juga dilengkapi dengan beberapa tetapan lanjutan termasuk Peristiwa dan Pemicu tersuai.

• Ketergantungan: jQuery
• Lesen: WTFPL

3. StickyJS

StickyJS adalah plugin jQuery melekit yang mudah digunakan yang melakukan apa yang dikatakannya. Plugin berfungsi keluar dari kotak. Namun, jika anda memerlukan beberapa penyesuaian, ia datang dengan Pilihan / Tetapan, Kaedah dan Peristiwa Tersuai.

• Ketergantungan: jQuery
• Lesen: Lesen MIT

4. HeadRoom

Pengepala tapak melekat akan mengambil ruang menegak yang berharga yang membuat perbezaan apabila anda melihat tapak di telefon bimbit. Headroom adalah pustaka JavaScript yang akan menjadikan header melekat anda pintar; tajuk akan disembunyikan apabila pengguna tatal ke bawah halaman dan muncul apabila menatal ke atas.

• Ketergantungan: Tiada / jQuery (pilihan) / Sudut (pilihan)
• Lesen: Lesen MIT

5. Membuat Js

Jarang membolehkan anda membuat elemen tetap dinamik sebagai pengguna tatal halaman. Hanya hubungi makeFixed () fungsi pada elemen yang anda mahu tetap. Semak demo untuk melihat tindakan tersebut.

• Ketergantungan: jQuery
• Lesen: GPL

6. MidnightJS

Tengah malam membolehkan anda melekat pelbagai tajuk / unsur dan bertukar di antara mereka berdasarkan kedudukan mereka dalam dokumen (pokok DOM), lihat demo untuk melihat apa yang saya maksudkan. Di samping itu anda boleh menukar warna mereka dengan mudah hanya dengan menambah data tengah malam atribut dengan nama warna yang ditentukan.

• Ketergantungan: jQuery
• Lesen: Lesen MIT

7. ScrollMagic

ScrollMagic mempunyai ciri maju untuk menambah interaksi, semasa tatal halaman. Anda boleh memasukkan elemen dari kedudukan tatal tertentu, menambah animasi berdasarkan kedudukan tatal, atau bahkan membuat kesan paralaks yang hebat. Demo memberikan anda beberapa pandangan tentang apa yang boleh dilakukan oleh plugin ini.

• Ketergantungan: jQuery / Velocity.js
• Lesen: Lesen Dual (MIT dan GPL)

8. onScreen

pada skrin sama dengan Waypoints - ia membolehkan anda melaksanakan fungsi sebagai unsur memasuki, meninggalkan, atau mencapai kedudukan tertentu dalam viewport browser.

• Ketergantungan: jQuery
• Lesen: Lesen MIT

9. Pin jQuery

jQuery Pin adalah plugin jQuery kecil untuk “pin” atau “ketik” unsur ke kedudukan, apabila anda menatal halaman. Bahagian kegemaran saya ini adalah pilihan untuk melumpuhkannya pada lebar paparan tertentu.

• Ketergantungan: jQuery
• Lesen: Lesen BSD

10. Sticky Float

Lompat melekit membolehkan kita memberi unsur-unsur kedudukan tetap yang relatif kepada ibu bapanya. Anda boleh menetapkan pilihan melekit mengikut keperluan anda dengan parameter yang disediakan dan dengan menukar nilai. Tangkap demo di sini.

• Ketergantungan: jQuery
• Lesen: Tidak jelas

11. Zebra Pin

Zebra Pin adalah pemalam ringan untuk membuat sebarang elemen pin ke bekas mereka. Dengan plugin ini, anda boleh menambah “melekit” kepada elemen dalam projek anda seperti navigasi, bar sisi, tajuk dan kaki anda, atau elemen lain yang anda mahu kekal kelihatan apabila pengguna menatal ke bawah. Lihat demo itu.

• Ketergantungan: jQuery
• Lesen: Lesen GPL

12. HC-Sticky

Dengan HC-Sticky, anda boleh membuat unsur melekit yang merujuk kepada bekasnya, kepada mana-mana elemen yang diberikan, atau dokumen itu sendiri. Plugin ini mempunyai beberapa pilihan yang boleh anda sesuaikan dengan keperluan anda, seperti jarak dari bahagian atas dan bawah untuk memulakan terapung, dan pilihan lain.

• Ketergantungan: jQuery
• Lesen: Lesen MIT

13. Sticky Mojo

Sticky Mojo adalah plugin jQuery yang ringan, pantas, dan fleksibel untuk membuat elemen melekit hebat. Ia serasi dengan penyemak imbas moden dan akan menurunkan anggun di IE.

• Ketergantungan: jQuery
• Lesen: Lesen MIT

14. Sticky Navbar

Jika anda mahu membuat navigasi halaman tunggal yang melekat apabila satu skrol ke bawah, perpustakaan ini adalah untuk anda.Navik Sticky akan meletakkan navigasi di bahagian atas tetingkap pelayar dan menyerlahkan pautan utama untuk menyambung ke bahagian yang sepadan pada halaman anda. Anda juga boleh menambah Animate.css untuk mencantikkan kesan navigasi.

• Ketergantungan: jQuery
• Lesen: Lesen MIT

15. StickyStack

StickyStack akan membuat elemen tersusun dengan yang lain apabila pengguna menatal unsur dan mencapai bahagian atas viewport. Dengan perpustakaan ini, halaman panjang anda akan berubah menjadi kad yang disusun.

• Ketergantungan: jQuery
• Lesen: Tidak jelas