JS Afiks (affix.js)
The Afiks Plugin memungkinkan unsur untuk menjadi ditempel (terkunci) ke suatu daerah pada halaman. Hal ini sering digunakan dengan menu navigasi atau tombol ikon sosial, untuk membuat mereka "tongkat" di kawasan tertentu sementara bergulir ke atas dan ke bawah halaman.
Plugin matikan perilaku ini dan mematikan (perubahan nilai posisi CSS dari statis untuk tetap), tergantung pada posisi gulir.
Imbuhan Plugin matikan antara tiga kelas: .affix , .affix-top , dan .affix-bottom . Setiap kelas mewakili negara tertentu. Anda harus menambahkan properti CSS untuk menangani posisi yang sebenarnya, dengan pengecualian position:fixed pada .affix kelas.
Untuk informasi lebih lanjut, baca Bootstrap Afiks Tutorial .
Tip: The Afiks Plugin ini sering digunakan bersama-sama dengan Scrollspy Plugin.
Via data-* Atribut
Tambahkan data-spy="affix" ke elemen Anda ingin memata-matai, dan data-offset-top|bottom=" number " atribut untuk menghitung posisi gulir.
Contoh
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
Cobalah sendiri " via JavaScript
Aktifkan manual dengan:
membubuhkan Pilihan
Pilihan bisa dilalui melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan untuk data-, seperti data-offset = "".
| Nama | Mengetik | kegagalan | Deskripsi |
|---|---|---|---|
| offset | number | object | function | 10 | Menentukan jumlah piksel untuk mengimbangi dari layar ketika menghitung posisi gulir. Bila menggunakan satu nomor, offset ditambahkan ke kedua arah atas dan bawah. Jika Anda hanya ingin mengontrol bagian atas atau bawah, menggunakan objek, seperti offset: {top:25} Untuk beberapa offset, menggunakan offset: {top:25, bottom:50} Tip: Gunakan fungsi untuk memberikan dinamis offset (dapat berguna untuk desain responsif) |
| target | selector | node | element | the window object | Menentukan unsur target membubuhkan |
membubuhkan Acara
Tabel berikut berisi peristiwa afiks semua tersedia.
| Peristiwa | Deskripsi | Cobalah |
|---|---|---|
| affix.bs.affix | Terjadi sebelum posisi tetap ditambahkan ke elemen (misalnya, ketika .affix-top kelas akan segera diganti dengan .affix kelas) | Cobalah |
| affixed.bs.affix | Terjadi setelah posisi tetap ditambahkan ke elemen (misalnya, setelah .affix-top kelas diganti dengan .affix kelas) | Cobalah |
| affix-top.bs.affix | Terjadi sebelum elemen atas kembali ke asli (non-fixed) posisinya (misalnya, .affix kelas akan segera diganti dengan .affix-top ) | Cobalah |
| affixed-top.bs.affix | Terjadi setelah elemen atas kembali ke asli (non-fixed) posisinya (misalnya, .affix kelas telah diganti dengan .affix-top ) | Cobalah |
| affix-bottom.bs.affix | Terjadi sebelum elemen bawah kembali ke aslinya posisinya (non-fixed) (misalnya, .affix kelas akan segera diganti dengan .affix-bottom ) | Cobalah |
| affixed-bottom.bs.affix | Terjadi setelah elemen bawah kembali ke asli (non-fixed) posisinya (misalnya, .affix kelas telah diganti dengan .affix-bottom ) | Cobalah |
contoh
navbar ditempel
Membuat menu navigasi ditempelkan horisontal:
Menggunakan jQuery untuk secara otomatis membubuhkan navbar a
Gunakan jQuery outerHeight() metode untuk membubuhkan navbar setelah pengguna telah menggulir melewati elemen tertentu (<header>) :
Scrollspy & Afiks
Menggunakan Afiks Plugin bersama-sama dengan Scrollspy Plugin:
Horizontal Menu (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Cobalah sendiri " 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> Cobalah sendiri " navbar animasi pada afiks
Gunakan CSS untuk memanipulasi berbeda .affix kelas:
Contoh - Perubahan warna latar belakang dan padding dari 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;
} Cobalah sendiri " Contoh - Slide di navbar
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} Cobalah sendiri "