Wie wird erstellt: Menü wird beim Scrollen ausgeblendet

Lernen Sie, wie Sie mit CSS und JavaScript eine Navigationsleiste beim Scrollen nach unten ausblenden.

Try it yourself

Wie wird die Navigationsleiste beim Scrollen nach unten ausgeblendet

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:

Stellen Sie den Stil der Navigationsleiste ein:

#navbar {
  background-color: #333; /* Schwarzer Hintergrund */
  position: fixed; /*固定位置 */
  top: 0; /* Bleibt oben bleiben */
  width: 100%; /* Gesamtbreite */
  transition: top 0.3s; /* Übergangseffekt beim Scrollen nach unten (nach oben) */
{}
/* Legen Sie den Stil der Navigationsleistenlinks fest */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
{}
#navbar a:hover {
  background-color: #ddd;
  color: black;
{}

Dritter Schritt - Fügen Sie JavaScript hinzu:

/* Wenn der Benutzer nach unten scrollt, wird die Navigationsleiste ausgeblendet. Wenn der Benutzer nach oben scrollt, wird die Navigationsleiste angezeigt. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  {}
  prevScrollpos = currentScrollPos;
{}

Try it yourself