Plugin Affix Bootstrap (Lanjutan)

Plugin Afiks

Plugin Affix memungkinkan sebuah elemen untuk ditempelkan (dikunci) ke suatu area di halaman. Ini sering digunakan dengan menu navigasi atau tombol ikon sosial, untuk membuatnya "menempel" di area tertentu saat menggulir ke atas dan ke bawah halaman.

Plugin mengaktifkan dan menonaktifkan perilaku ini (mengubah nilai CSS positiondari staticmenjadi fixed), tergantung pada posisi gulir.

Contoh 1) Bilah navigasi yang ditempelkan:

Contoh 2) Bilah sisi yang ditempelkan:

Dengan Affix, ketika kita menggulir halaman ke atas dan ke bawah, menu selalu terlihat dan terkunci pada posisinya.

Cara Membuat Menu Navigasi Tertempel

Contoh berikut menunjukkan cara membuat menu navigasi tempel horizontal:

Contoh berikut menunjukkan cara membuat menu navigasi tempel vertikal:

Contoh Dijelaskan

Tambahkan data-spy="affix"ke elemen yang ingin Anda tempel.

Secara opsional, tambahkan data-offset-top|bottomatribut untuk menghitung posisi gulir.

Bagaimana itu bekerja

Plugin affix beralih di antara tiga kelas: .affix, .affix-top, dan .affix-bottom. Setiap kelas mewakili keadaan tertentu. Anda harus menambahkan properti CSS untuk menangani posisi sebenarnya, dengan pengecualian position:fixed di .affixkelas.

• Plugin menambahkan kelas .affix-topatau .affix-bottomuntuk menunjukkan elemen berada di posisi paling atas atau paling bawah. Pemosisian dengan CSS tidak diperlukan pada saat ini.


• Menggulir melewati elemen yang ditempelkan memicu pembubuhan yang sebenarnya - Di sinilah plugin menggantikan kelas .affix-topor .affix-bottomdengan .affixkelas (sets position:fixed). Pada titik ini, Anda harus menambahkan CSS topatau bottomproperti untuk memposisikan elemen yang ditempelkan di halaman.


• Jika offset bawah ditentukan, menggulir melewatinya akan menggantikan .affixkelas dengan .affix-bottom. Karena offset bersifat opsional, pengaturannya mengharuskan Anda untuk mengatur CSS yang sesuai. Dalam hal ini, tambahkan position:absolutebila perlu.

Pada contoh pertama di atas, plugin Affix menambahkan .affixkelas (position:fixed) ke elemen <nav> ketika kita telah menggulir 197 piksel dari atas. Jika Anda membuka contoh, Anda juga akan melihat bahwa kami menambahkan topproperti CSS dengan nilai 0 ke .affixkelas. Ini untuk memastikan bahwa bilah navigasi tetap berada di bagian atas halaman setiap saat, ketika kita telah menggulir 197 piksel dari atas.

Scrollspy & Afiks

Menggunakan plugin Affix bersama dengan plugin Scrollspy :

Referensi Affix Bootstrap Lengkap

Untuk referensi lengkap tentang semua metode dan acara imbuhan, buka Referensi Afiks Bootstrap JS kami .