Sådan opretter du: Skjul menuen ved rulning

Lær, hvordan du bruger CSS og JavaScript til at skjule navigationsmenuen ved rulning ned.

Try it yourself

Sådan skjuler du navigationsfeltet ved rulning ned

Første trin - Tilføj HTML:

Opret navigationsfeltet:

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

Andet trin - Tilføj CSS:

Angiv navigationsfeltets stil:

#navbar {
  background-color: #333; /* Sort baggrundsfarve */
  position: fixed; /* Gør det klistrer/fastgjort */
  top: 0; /* Hold på toppen */
  width: 100%; /* Fuld bredde */
  transition: top 0.3s; /* Overgangseffekt ved at rulle ned (op) */
{}
/* Angiv stilen for navigationsfeltets links */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
{}
#navbar a:hover {
  background-color: #ddd;
  color: black;
{}

Tredje trin - Tilføj JavaScript:

/* Når brugeren ruller ned, skjul navigationsfeltet. Når brugeren ruller op, vis navigationsfeltet. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  hvis (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } ellers {
    document.getElementById("navbar").style.top = "-50px";
  {}
  prevScrollpos = currentScrollPos;
{}

Try it yourself