Sticky Header using HTML CSS & Javascript

 

Sticky Header using HTML CSS Javascript

Hello friends, today I sharing another snippet based on Sticky Header using HTML CSS & Javascript. Previously I have shared another snippet on Animated Sticky Header on the scroll. Check out that snippet if you are interested. 

Sticky header or navbar is a term we use for navbar that remains fixed on top when visitors scroll down the page. In this snippet of Sticky Header using HTML CSS & Javascript, I used plain HTML CSS and a little javascript code to get the awesome sticky header animation.

In the HTML markup, first, I have taken a header tag. Inside that, I have placed an h1 tag with a random text and some nav item inside a nav tag. after the header tag, I have taken a div item named 'box' and inserted a section with some an h2 title some dummy text under p tag. That's all for the HTML markup.


You may also like:

In the CSS styling, I first removed the default margin padding of the document by providing a margin padding of zero to the universal selector. I used Poppins as the primary font for the project. You can use whatever font you want when you modify the snippet. After that, I did some basic styling for the header. I gave the title a background image and styled the h1 tag to remain in the middle of the banner. I then gave the nav tag an absolute position value and bottom value to stay at the banner's bottom. After that, I did some regular styling for the rest of the projects' elements as well. after that, I styled a particular class named 'sticky' and then used some javascript code to initiate the class style when the visitor scrolls down the webpage.

To create this snippet, make one HTML and CSS file. You will need to add the latest jquery CDN in your project for the snippet to work. Copy, paste, and save the following codes in your project. Run the project in your browser and make the necessary changes according to your needs.


HTML




CSS




I hope you liked this small snippet. To stay connected with this blog, please follow our social media profiles. 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