In this Article We will create a sticky Navigation bar with the help of javascript ans css, when user scroll the page the header will be sticky on the top and when user scrolls down the page, the navigation animate to top and when scroll up then it will animat down and visible to the users, this is verys simaple example of javascript sticky header
we have provided you the two options of javascript sticky navigation in one we have animated them with the scroll postion of three classes stage, when on scroll bototm the navigation will be added a class scrolled-sticky and when user scrolls up the page it will added sticy class on the navigation to the navigation animate to down, this all happens on window.scroll event so when user scroll the page it trigger window.scroll event which calculate the scroll positions and distance from the top and then animate the sticky header. also added scale animation on its initial position when scrolled to the top of the page.