Wie erstelle ich eine Sticky-Navigationsleiste in Bootstrap?-CSS-Tutorial-php.cn

Wie erstelle ich eine Sticky-Navigationsleiste in Bootstrap?

Patricia Arquette

Freigeben： 2024-12-03 15:14:15

Original

670 Leute haben es durchsucht

How to Create a Sticky Navigation Bar in Bootstrap?

So erreichen Sie eine Sticky-Navigationsleiste in Bootstrap

Das Problem verstehen

In diesem Szenario besteht das Ziel darin, eine Navigationsleiste zu erstellen, die bestehen bleibt am unteren Rand des Ansichtsfensters, wenn die Seite geladen wird. Wenn der Benutzer nach unten scrollt, sollte die Leiste nach oben scrollen und am oberen Rand der Seite fixiert werden.

Erstellen einer Sticky Nav Bar

HTML und 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;
}

Nach dem Login kopieren

Implementierung der Fixität

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:**

Nach dem Login kopieren

/Sticky-State-Styling /
.sticky {
Hintergrundfarbe: #ffffff;
Box-Shadow: 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.

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Sticky-Navigationsleiste in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!