When you visit a website, most of the times you see the fixed navigation on-scroll functionality. This means, when you are on the top of the page, the navigation bar is fixed at some place in header section of the page. But when you start scrolling down, then at some point, this navigation bar will stick to the top of the screen. It helps website visitors to navigate to different pages even when they are on the bottom of the pages.
This is a very basic requirement when you are building a custom website. In this post, we will learn an easy way to do it using jQuery & CSS.
Please don’t mind the design & styling. My motive is to explain the functionality. As here we are switching the class of body tag, you can do any change in any section of the page on scroll. Moreover, you can add transitions to add some animations in the same.
