Hur man skapar: göm meny vid rullning

Hur man gömmer navigationsfältet vid ner-rullning

Steg 1 - Lägg till HTML:

Skapa navigationsfältet:

<div id="navbar">
  <a href="#home">Hem</a>
  <a href="#news">Nyheter</a>
  <a href="#contact">Kontakt</a>
</div>

Steg 2 - Lägg till CSS:

Ställ in stilen för navigationsfältet:

#navbar {
  bakgrundsfärg: #333; /* Svart bakgrundsfärg */
  position: fast; /* Gör det klistra fast/f fast */
  top: 0; /* Behåll på toppen */
  bredd: 100%; /* Full bredd */
  övergång: top 0.3s; /* Effekt vid rullning ner (upp) */
{}
/* Ställ in stilen för navigationslänkar i navigationsfältet */
#navbar a {
  flytta till vänster;
  display: block;
  färg: vit;
  text-align: center;
  marginal: 15px;
  text-decoration: none;
{}
#navbar a:hover {
  bakgrundsfärg: #ddd;
  färg: svart;
{}

Steg 3 - Lägg till JavaScript:

/* När användaren rullar ner, göm navigationsfältet. När användaren rullar upp, visa navigationsfältet. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  om (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } annars {
    document.getElementById("navbar").style.top = "-50px";
  {}
  prevScrollpos = currentScrollPos;
{}

Prova själv