Bagaimana untuk Mencipta Bar Navigasi Melekit dalam Bootstrap?

Cara mencapai Bar Navigasi Melekit dalam Bootstrap

Memahami Masalah

Dalam senario ini, matlamatnya adalah untuk mencipta bar navigasi yang kekal di bahagian bawah port pandangan apabila halaman dimuatkan. Apabila pengguna menatal ke bawah, bar harus menatal ke atas dan ditetapkan ke bahagian atas halaman.

Membuat Bar Nav Melekit

HTML dan CSS:

<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li></p>
<p></ul><br></div></p>
<pre class="brush:php;toolbar:false">#nav-container {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #202020;
  z-index: 10;
}

.nav-menu {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

.nav-menu > li {
  margin: 0 10px;
}

.nav-menu > li > a {
  color: #ffffff;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 5px;
}

.sticky {
  position: fixed;
  top: 0;
}

Melaksanakan Fixity

JavaScript:

const menuElement = document.getElementById("nav-container");

window.addEventListener("scroll", () => {
  if (window.scrollY > 100) {
    menuElement.classList.add("sticky");
  } else {
    menuElement.classList.remove("sticky");
  }
});
````
This code adds the "sticky" class to the navigation bar element when scrolling down more than 100 pixels. When scrolling back up to a point where it's no longer fixed, the "sticky" class is removed.

**CSS:**

/Penggayaan keadaan melekit /
.melekit {
warna latar belakang: #ffffff;
bayang kotak: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

This styling can be customized to match the desired appearance of the fixed navigation bar.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Navigasi Melekit dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css bootstrap this viewport background ul

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn