Wie man eine: klebende/feste Navigationsleiste erstellt

Wie erstellt man eine festsitzende Navigationsleiste

Erster Schritt - Fügen Sie HTML hinzu:

Erstellen Sie die Navigationsleiste:

<div id="navbar">
  <a href="#home">Startseite</a>
  <a href="#news">Nachrichten</a>
  <a href="#contact">Kontakt</a>
</div>

Zweiter Schritt - Fügen Sie CSS hinzu:

Stil der Navigationsleiste setzen:

/* Setzen Sie das Stil der Navigationsleiste */
#navbar {
  overflow: hidden;
  background-color: #333;
{}
/* Links der Navigationsleiste */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
{}
/* Inhaltsbereich der Seite */
.content {
  padding: 16px;
{}
/* Fügen Sie der Navigationsleiste die Klasse "sticky" hinzu, wenn Sie an ihre Verschiebeposition gelangen */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
{}
/* Fügen Sie dem Inhaltsbereich der Seite etwas Oberhalb des Randes hinzu, um plötzliche schnelle Bewegungen zu vermeiden (da die Navigationsleiste am oberen Rand der Seite eine neue Position erhält (position:fixed und top:0)) */
.sticky + .content {
  padding-top: 60px;
{}

Dritter Schritt - Fügen Sie JavaScript hinzu:

// Führen Sie myFunction aus, wenn der Benutzer die Seite scrollt
window.onscroll = function() {myFunction()};
// Erhalten Sie die Navigationsleiste
var navbar = document.getElementById("navbar");
// Erhalten Sie den Verschiebeposition der Navigationsleiste
var sticky = navbar.offsetTop;
// Wenn Sie an die Position der Navigationsleiste scrollen, fügen Sie ihr die Klasse "sticky" hinzu. Wenn Sie die Position verlassen, entfernen Sie die Klasse "sticky".
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  {}
{}

Selbst ausprobieren