Afiks Bootstrap JS
Afiks JS (imbuhan.js)
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 posisi CSS dari statis menjadi tetap), tergantung pada posisi gulir.
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.
Untuk informasi lebih lanjut, baca Tutorial Afiks Bootstrap kami .
Tip: Plugin Affix sering digunakan bersama dengan plugin Scrollspy .
Melalui data-* Atribut
Tambahkan data-spy="affix"ke elemen yang ingin Anda intai, dan
atribut untuk menghitung posisi gulungan.data-offset-top|bottom="number"
Contoh
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Melalui JavaScript
Aktifkan secara manual dengan:
Contoh
$('.nav').affix({offset: {top: 150} });
Opsi Afiks
Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Acara Afiks
Tabel berikut mencantumkan semua peristiwa imbuhan yang tersedia.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
Lebih Banyak Contoh
Bilah navigasi terpasang
Buat menu navigasi tempel horizontal:
Contoh
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Menggunakan jQuery untuk secara otomatis membubuhkan navbar
Gunakan metode outerHeight() jQuery untuk membubuhkan navbar setelah pengguna menggulir melewati elemen tertentu (<header>):
Contoh
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy & Afiks
Menggunakan plugin Affix bersama dengan plugin Scrollspy :
Menu Horisontal (Bilah Navigasi)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Menu Vertikal (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
Navbar animasi pada affix
Gunakan CSS untuk memanipulasi kelas .affix yang berbeda:
Contoh - Ubah warna latar belakang dan padding navbar pada scroll
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
Contoh - Geser di bilah navigasi
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}