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.

  ... navbar here ...
  ... main content here ...
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; = headerHeight + "px";
let lastScroll = 0;
window.addEventListener("scroll", () => {
  let currentScroll = window.pageYOffset;
  if (currentScroll - lastScroll > 0) {
  } else {
    // scrolled up -- header show
  lastScroll = currentScroll;

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

See Demo And Download

Official Website(amdhanwate): Click Here

This superior jQuery/javascript plugin is developed by amdhanwate. For extra Advanced Usages, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…