How TO - Hide Menu on Scroll

How TO - Slide Down a Bar on Scroll

Javascript

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;
}

+++++

var prevScrollPos = window.pageYOffset;

Here, we declare a variable prevScrollPos and assign it the initial value of the current vertical scroll position (window.pageYOffset). This variable will be used to keep track of the previous scroll position.

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;
}

This code sets up an event handler (window.onscroll) that is triggered whenever the user scrolls the page. The function assigned to window.onscroll is an anonymous function (a function without a name) that performs the following steps:

It retrieves the current vertical scroll position (window.pageYOffset) and assigns it to the variable currentScrollPos.

It compares the previous scroll position (prevScrollPos) with the current scroll position (currentScrollPos). If the previous scroll position is greater than the current scroll position, it means the user is scrolling up.

If the user is scrolling up, it sets the top style property of the element with the ID "navbar" to "0", effectively showing the navbar.

If the user is scrolling down, it sets the top style property of the element with the ID "navbar" to "-50px", effectively collapsing and hiding the navbar.

Finally, it updates the previous scroll position (prevScrollPos) to the current scroll position (currentScrollPos) to prepare for the next scroll event.

CSS

#navbar {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

/* Style the navbar 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;
}

• so top' is the essence here.top' is the distance from the top edge of an element's containing block. In the context of the navbar styling, the top property is used to control the vertical position of the navbar. And it hides itself, by going to minus (-50px), and so it hides itself. And there is also a transition effect.

With JS, it actually just changes the property of one style! And in CSS itself you have a transition time.

• transition property is used to apply a smooth transition effect when a CSS property changes its value. It allows you to control the duration and timing function of the transition. In the case of transition: top 0.3s;, it means that any change in the top property of the element will be transitioned over a duration of 0.3 seconds.

HTML

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