Reveal and Unreveal Navigation Bar Depending On The User's Scroll

Reveal Unreveal Scroll is a smart and easy-to-use navigation bar component that automatically appears and hides itself depending on the direction of scrolling. It listens for scrolling events, determines whether the page has scrolled up or down, and then applies the corresponding CSS classes to the navigation bar.

show navbar on scroll down, hide navbar on scroll down and show on scroll up, showhide div on scroll position, hide header on scroll jquery

How to make use of it:

1. Create a set header navbar on the web page.

<header>
  ... navbar here ...
</header>
<main>
  ... main content here ...
</main>

header {
  display: flex;
  justify-content: space-between;
  padding: 2rem 5rem;
  background: #4F46E5;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 300ms ease;
  z-index: 10;
}

2. Apply ‘scroll-up’ or ‘scroll-down’ CSS classes to the navbar based mostly on the scroll direction.

const body = document.body;
const header = document.querySelector("header");
const main = document.querySelector("main");
const headerHeight = document.querySelector("header").offsetHeight;
main.style.top = headerHeight + "px";
let lastScroll = 0;
window.addEventListener("scroll", () => {
  let currentScroll = window.pageYOffset;
  if (currentScroll - lastScroll > 0) {
    header.classList.add("scroll-down");
    header.classList.remove("scroll-up");
  } else {
    // scrolled up -- header show
    header.classList.add("scroll-up");
    header.classList.remove("scroll-down");
  }
  lastScroll = currentScroll;
})

Show/Hide Navbar On Scroll Down Or Up, reveal unreveal on scroll Plugin/Github