How to create: hide menu when scrolling

Learn how to use CSS and JavaScript to hide the navigation menu when scrolling down.

亲自试一试

How to hide the navigation bar when scrolling down

first step - Add HTML:

Create the navigation bar:

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

second step - Add CSS:

Set the navigation bar style:

#navbar {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay at the top */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (up) */
{}
/* Set the style of the navigation bar 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;
{}

third step - Add JavaScript:

/* 当用户向下滚动时，隐藏导航栏。当用户向上滚动时，显示导航栏。 */
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;
{}

亲自试一试