Wie erstelle ich eine Sticky-Navigationsleiste 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;
}

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

/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.

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!

css bootstrap this viewport background ul

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn