15 jQuery Plugins Untuk Membuat Elemen Sticky Cerdas

Sekarang umum untuk melihat elemen-elemen tertentu di situs yang ditetapkan pada posisi ketika Anda menggulir ke atas atau ke bawah situs, mis. menu navigasi, tajuk atau bilah sisi. Ini memungkinkan elemen tersedia, terlepas dari posisi pengguna.

Disebut elemen lengket, ini dapat dicapai hanya dengan menggunakan CSS, namun, dengan menggunakan metode ini, efeknya tidak dapat diandalkan di beberapa browser. Itulah sebabnya kami telah mengumpulkan beberapa perpustakaan JS dan plugin jQuery yang akan memungkinkan Anda untuk mencapai desain UX khusus ini dengan sedikit atau tanpa kesulitan.

1. Titik arah

Waypoint adalah pustaka untuk menjalankan fungsi berdasarkan posisi elemen di viewport. Muncul dengan fungsi pintas yang membuat elemen itu “lengket”. Anda dapat menyesuaikan arah gulir - naik, turun, dan bahkan kanan dan kiri - untuk mana elemen harus menempel di viewport.

• Ketergantungan: Tidak Ada / jQuery (opsional)
• Lisensi: Lisensi MIT

2. Sticky Kit

Dengan StickyKit, Anda tidak hanya dapat membuat elemen stick di dalam viewport, tetapi Anda juga bisa membuatnya tetap di dalam elemen induk yang Anda tetapkan untuk beberapa elemen sekaligus. Plugin ini juga dilengkapi dengan beberapa pengaturan lanjutan termasuk Acara dan Pemicu kustom.

• Ketergantungan: jQuery
• Lisensi: WTFPL

3. StickyJS

StickyJS adalah plugin jQuery sticky yang mudah digunakan yang melakukan apa yang dikatakannya. Plugin bekerja di luar kotak. Namun, jika Anda membutuhkan penyesuaian, ia datang dengan Opsi / Pengaturan, Metode dan Acara Kustom.

• Ketergantungan: jQuery
• Lisensi: Lisensi MIT

4. HeadRoom

Header situs yang lengket akan mengambil ruang vertikal berharga yang membuat perbedaan ketika Anda melihat situs di ponsel. Ruang utama adalah pustaka JavaScript yang akan membuat tajuk lengket Anda cerdas; header akan disembunyikan ketika pengguna gulir ke bawah halaman dan muncul saat menggulir ke atas.

• Ketergantungan: Tidak Ada / jQuery (opsional) / Sudut (opsional)
• Lisensi: Lisensi MIT

5. PerbaikiJS

Diperbaiki memungkinkan Anda membuat elemen diperbaiki secara dinamis saat pengguna menggulir halaman. Panggil saja makeFixed () berfungsi pada elemen yang ingin Anda perbaiki. Periksa demo untuk melihatnya saat beraksi.

• Ketergantungan: jQuery
• Lisensi: GPL

6. MidnightJS

Tengah malam memungkinkan Anda untuk menempel beberapa header / elemen dan beralih di antara mereka berdasarkan posisi mereka di dalam dokumen (pohon DOM), lihat demo untuk melihat apa yang saya maksud. Selain itu, Anda dapat mengubah warna dengan cepat hanya dengan menambahkan data tengah malam atribut dengan nama warna yang ditentukan.

• Ketergantungan: jQuery
• Lisensi: Lisensi MIT

7. ScrollMagic

ScrollMagic memiliki fitur-fitur canggih untuk menambahkan interaksi, selama gulir halaman. Anda dapat menyematkan elemen dari posisi gulir tertentu, menambahkan animasi berdasarkan posisi gulir, atau bahkan membuat efek paralaks yang mengagumkan. Demo ini memberi Anda beberapa wawasan tentang apa yang dapat dilakukan plugin ini.

• Ketergantungan: jQuery / Velocity.js
• Lisensi: Lisensi Ganda (MIT dan GPL)

8. onScreen

pada layar mirip dengan Waypoints - memungkinkan Anda untuk menjalankan fungsi saat elemen memasuki, meninggalkan, atau mencapai posisi tertentu dalam viewport browser.

• Ketergantungan: jQuery
• Lisensi: Lisensi MIT

9. jQuery Pin

jQuery Pin adalah plugin jQuery kecil untuk “pin” atau “membuka peniti” elemen ke suatu posisi, saat Anda menggulir halaman. Bagian paling favorit saya dari plugin ini adalah opsi untuk menonaktifkannya pada lebar viewport tertentu.

• Ketergantungan: jQuery
• Lisensi: Lisensi BSD

10. Sticky Float

Sticky Float memungkinkan kita untuk memberikan elemen posisi tetap yang relatif terhadap induknya. Anda dapat mengatur opsi sticky sesuai dengan kebutuhan Anda dengan parameter yang disediakan dan dengan mengubah nilainya. Tangkap demo di sini.

• Ketergantungan: jQuery
• Lisensi: Tidak terdefinisi

11. Pin Zebra

Zebra Pin adalah plugin ringan untuk membuat pin elemen apa pun ke wadah mereka. Dengan plugin ini Anda bisa menambahkan “lengket” ke elemen-elemen dalam proyek Anda seperti navigasi, sidebar, header dan footer, atau elemen lain yang Anda ingin tetap terlihat ketika pengguna menggulir ke bawah. Lihat demo.

• Ketergantungan: jQuery
• Lisensi: Lisensi GPL

12. HC-Sticky

Dengan HC-Sticky, Anda bisa membuat elemen lengket yang merujuk ke wadahnya, ke elemen tertentu, atau ke dokumen itu sendiri. Plugin ini memiliki beberapa opsi yang dapat Anda sesuaikan dengan kebutuhan Anda, seperti jarak dari atas dan bawah untuk mulai mengambang, dan opsi lainnya.

• Ketergantungan: jQuery
• Lisensi: Lisensi MIT

13. Sticky Mojo

Sticky Mojo adalah plugin jQuery yang ringan, cepat, dan fleksibel untuk membuat elemen lengket yang mengagumkan. Ini kompatibel dengan browser modern dan akan menurun dengan anggun di IE.

• Ketergantungan: jQuery
• Lisensi: Lisensi MIT

14. Sticky Navbar

Jika Anda ingin membuat navigasi satu halaman yang tetap ketika satu scroll ke bawah, perpustakaan ini adalah untuk Anda.Sticky Navbar akan menempatkan navigasi di bagian atas jendela browser dan menyoroti tautan jangkar untuk menghubungkan ke bagian yang sesuai pada halaman Anda. Anda juga dapat menambahkan Animate.css untuk mempercantik efek navigasi.

• Ketergantungan: jQuery
• Lisensi: Lisensi MIT

15. StickyStack

StickyStack akan membuat elemen menumpuk dengan yang lain ketika pengguna menggulir elemen dan mencapai bagian atas viewport. Dengan perpustakaan ini, halaman panjang Anda akan berubah menjadi kartu bertumpuk.

• Ketergantungan: jQuery
• Lisensi: Tidak terdefinisi