Affix adalah kontrol yang berguna dalam bootstrap, yang dapat memantau posisi scrollbar browser dan menjaga navigasi Anda di area halaman yang terlihat setiap saat. Pada awalnya, navigasi adalah tata letak streaming yang normal di halaman, menempati posisi tetap dalam dokumen. Ketika halaman digulir, navigasi secara otomatis menjadi tata letak tetap (diperbaiki), selalu di area tampilan pengguna. Mari kita bicara tentang penggunaannya. Pertama, mari kita lihat prinsip implementasinya. Itu dicapai dengan memodifikasi atribut kelas elemen halaman secara real time
Pada awalnya, atribut AFFXI-TOP akan ditambahkan secara otomatis ke kelas elemen yang berlaku imbuhan.
Ketika scrollbar menggulir sehingga navigasi akan mencapai bagian atas halaman, imbuhan-top akan diubah menjadi imbuhan di kelas elemen.
Saat menyeret scrollbar ke bagian bawah halaman, Affix akan secara otomatis berubah menjadi imbuhan lagi
Proses di atas sepenuhnya diimplementasikan oleh kontrol itu sendiri, dan kita tidak perlu melakukan intervensi. Kita hanya perlu menulis CSS di negara bagian ini.
Jika kita bisa mengatur
.Affix-top {top: 150px;}. Affix {Top: 20px; // Situs web biasanya dibangun dengan bootstrap memiliki bilah navigasi di kepala} .affix-bottom {...}Mari kita lihat bagaimana itu digunakan
1. Lewati atribut data
Anda hanya perlu menambahkan data-spy = "imbangi" ke elemen halaman yang perlu Anda dengarkan. Kemudian gunakan offset untuk menentukan dan mematikan unsur.
<ul data-sppy = "affix" data-offset-top = "190"> <li> <a href = "#satu"> tutorial satu </a> </li> <li> <a href = "#dua"> tutorial dua </a> </li> <a href = "#tiga"> tutorial tiga </a> </li> <li> <a href = "#tiga"> tutorial tiga </a> </Li> <li> <a "#"
di mana data-offset-top adalah posisi di mana elemen status imbuhan-top terletak dari bagian atas halaman. Saat menggulir ke atas halaman, kita dapat mengatur gaya ".Affix" untuk mengatur ulang nilai "atas".
2. Memanggil JavaScript
Kode sampel adalah sebagai berikut:
$ ('#mynav'). Affix ({offset: {top: 100, // Posisi dari bagian atas halaman dalam pengguliran adalah bagian bawah: function () {// Posisi dari bagian bawah halaman saat pengguliran selesai (this.bottom = $ ('.Kode HTML adalah sebagai berikut (hanya kode inti yang ditampilkan):
<ul id = "mynav"> <li> <a href = "#one"> tutorial satu </a> </li> <li> <a href = "#dua"> tutorial dua </a> </li> <li> <a href = "#tiga"> tutorial tiga </a> </li> </ul> </div> </Div>
Di atas tampaknya telah memperkenalkan penggunaan imbuhan di bootstrap, tetapi dalam proses penggunaan yang sebenarnya, kami akan menemukan bahwa ketika menyeret scrollbar, lebar elemen halaman menggunakan imbuhan akan berubah, menghasilkan tata letak halaman yang berantakan. Oleh karena itu, yang terbaik adalah menuliskan lebarnya di CSS yang mendefinisikan imbuhan, seperti:
.affix {width: 250px;}Dengan cara ini, tidak ada masalah ketika jendela cukup besar, tetapi ketika Anda menyeret dan mengubah ukuran jendela, Anda akan menemukan bahwa tata letak berantakan lagi. Masalah ini telah mengganggu saya sejak lama. Akhirnya, dengan menganalisis kode sumber bootcss, saya menemukan bahwa situs web telah menambahkan "hidden-print", "hidden-xs", "tersembunyi-sm" atribut ke semua kelas yang menggunakan elemen afiks. Ini digunakan untuk menyembunyikan imbuhan ketika layar tidak memenuhi persyaratan. Meskipun mempengaruhi kemudahan penggunaan, itu memastikan bahwa tata letak rapi dalam hal apa pun.
Di atas adalah penjelasan terperinci tentang penggunaan kontrol imbuhan dalam bootstrap dan cara untuk mempertahankan tata letak yang indah. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!