Hoe aan te maken: navigatielijn naar beneden schuiven tijdens het scrollen

Hoe de navigatielijn naar beneden schuiven

Eerste stap - Voeg HTML toe：

Maak de navigatielijn aan：

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">Nieuws</a>
  <a href="#contact">Contact</a>
</div>

Tweede stap - Voeg CSS toe：

Stel de stijl van de navigatielijn in：

#navbar {
  achtergrondkleur: #333; /* Zwart achtergrondkleur */
  positie: vast; /* Zorgt ervoor dat het vast blijft plakken/fixed */
  top: -50px; /* Verberg de navigatielijn buiten het topzicht 50px */
  breedte: 100%; /* Volledige breedte */
  overgang: top 0.3s; /* Overgangseffect bij naar beneden (naar boven) schuiven */
}
/* Stel het stijl van de navigatielinken in */
#navbar a {
  zeefloat: links;
  weergave: blok;
  kleur: wit;
  tekstuitlijning: center;
  uitsteek: 15px;
  tekstdecoratie: none;
}
#navbar a:hover {
  achtergrondkleur: #ddd;
  kleur: zwart;
}

Derde stap - Voeg JavaScript toe：

// 当用户从文档顶部向下滚动 20px 时，向下滑动导航栏
// 当用户滚动到页面顶部时，向上滑动导航栏（距顶部视图 50px）
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  }
}

Probeer het zelf