Hoe aan te maken: Verberg menu bij scollen

Leer hoe je een navigatiemenu kunt verbergen bij naar beneden scollen met behulp van CSS en JavaScript.

Try it yourself

Hoe de navigatielijn verbergen bij naar beneden scollen

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; /* Maak het vast/gebonden */
  top: 0; /* Blijf aan de top hangen */
  breedte: 100%; /* Volledige breedte */
  overgang: top 0.3s; /* Overgangseffect bij naar beneden (naar boven) schuiven */
{}
/* Stel de stijl van de navigatielijnlinks in */
#navbar a {
  zeefloat: links;
  weergave: blok;
  kleur: wit;
  tekstuitlijning: center;
  padding: 15px;
  tekstdecoratie: none;
{}
#navbar a:hover {
  achtergrondkleur: #ddd;
  kleur: zwart;
{}

Derde stap - Voeg JavaScript toe:

/* Wanneer de gebruiker naar beneden scrolt, verbergt de navigatielijn. Wanneer de gebruiker naar boven scrolt, wordt de navigatielijn weergegeven. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  {}
  prevScrollpos = currentScrollPos;
{}

Try it yourself