Hide or Show Navbar when Scroll Down or Up using Javascript

 

Hello Friends, Welcome Back to this Blog. Today I am going to share another simple yet interesting javascript-based snippet with you. In this project, we will create a hide or show animation of navbar when we will scroll down the page or move up of the page of a website. In the HTML markup, I have taken a div named 'headed' nad inside that, and I placed another div called 'menu' where I put some anchor tags for the menu. Underneath the header div, I took another div named 'wrapper' and placed a header,sub-header, and some random text. I gave the wrapper an absolute position value and gave it a minus z-index value so that the content doesn't overlap the menu. Later I applied some basic CSS styles to make it looks the way you see in the video demo. In the javascript portion, I have created a scroll function where the header menu will hide at the beginning and will appear when we will go down the page. I have shared lots of snippets based on javascript before. Make sure to check those as well. Without further a due, I am providing the code link below for you.

I hope you liked this simple project. If so, please share articles and subscribe to our social media profiles to stay connected with this blog. Thank you for visiting the blog.