Hide or Show Navbar when Scroll Down or Up using Javascript


show and hide menu on scroll

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.

Please do not enter any spam link in the comment box.

Post a Comment

Please do not enter any spam link in the comment box.

Post a Comment (0)

Previous Post Next Post