Bagaimanakah saya boleh membuat bar navigasi melekit menggunakan Bootstrap 3.0?

Membuat Bar Navigasi Melekit Menggunakan Bootstrap

Apabila tapak web dimuatkan, pengguna sering memilih bar navigasi muncul secara konsisten di bahagian atas halaman . Apabila pengguna menatal ke bawah, bar navigasi harus menatal ke atas dan akhirnya menjadi tetap ke bahagian atas skrin. Panduan ini menunjukkan cara untuk mencapai ini menggunakan Bootstrap 3.0.

Penyelesaian Menggunakan JQuery dan JavaScript:

<div> <h2>let what you mahu di sini</h2><br> <p>hanya laraskan javascript saiz untuk dipadankan dengan tetingkap ini</p><br></div></p>
<p><nav><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul>

Salin selepas log masuk

html, badan {
tinggi: 4000px;
}

.navbar -tetap {
atas: 0;
z-indeks: 100;
kedudukan: tetap;
lebar: 100%;
}

body_div {

atas: 0;
kedudukan: relatif;
tinggi : 200px;
warna latar belakang: hijau;
}

sepanduk {

lebar: 100%;
tinggi: 273px;
warna latar belakang: kelabu;
limpahan: tersembunyi;
}

nav_bar {

sempadan: 0;
warna latar belakang: #202020;
jejari sempadan: 0px;
jidar bawah: 0;
tinggi: 30px;
}

//the css di bawah adalah untuk pautan, tidak diperlukan untuk nav melekit
.nav_links {
margin: 0;
}

.nav_links li {
paparan: inline-block;
margin-top: 4px;
}

.nav_links li a {
padding: 0 15.5px;
color: #3498db;
hiasan teks: tiada;
}

$(dokumen).siap(fungsi() {
// tukar integer di bawah untuk memadankan ketinggian div atas anda, yang saya panggil
//sepanduk. Hanya tambah 1 pada nombor terakhir. console.log($(window).scrollTop())
//untuk mengetahui kedudukan tatal apabila betul-betul anda mahu membetulkan nav
//bar atau div atau apa sahaja. Saya terperangkap dalam console.log untuk anda. Hanya keluarkan apabila
//anda tahu kedudukannya.
$(window).scroll(function () {

console.log($(window).scrollTop());

if ($(window).scrollTop() > 550) {
  $('#nav_bar').addClass('navbar-fixed-top');
}

if ($(window).scrollTop() < 551) {
  $('#nav_bar').removeClass('navbar-fixed-top');
}

});
});
< /pre>
Penyelesaian ini menggunakan JavaScript untuk menambah dan mengalih keluar kelas atas tetap navbar daripada bar navigasi berdasarkan kedudukan tatal. Kedudukan tatal yang tepat di mana bar navigasi menjadi tetap boleh dilaraskan dengan menukar nilai dalam kod JavaScript.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat bar navigasi melekit menggunakan Bootstrap 3.0?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!