Animated Sticky Header on scroll with HTML CSS and Javascript

byCodingFlicks -September 27, 2020

0

One of the important elements of a website is the navigation bar or header. The reason for this is that it provides directions to navigate each page of the entire website. And the sticky header or sticky navbar is a website navigation bar that remains visible at the top of the screen when users scroll the page. This sticky header or navbar keeps the necessary navigation links of that website accessible to users at all times. When a website includes this feature, users do not have to scroll all the way up to find the menu. Today we will create an animated sticky header on scroll with HTML, CSS, and JavaScript. The creation process of the video tutorial is shown below.

Video Tutorial:

I have taken a nav element with a specific id name 'navArea' in the HTML markup. Inside the nav element, I have taken a div named log and put a png image as a logo. After that, I have also taken an unordered list with five nav items. After creating the navbar, I have taken 3 section tags and placed some random text inside those. At last, inside a footer tag, I have provided some random text as a copyright text.

In CSS, we first clean up the document by setting the default margin and padding to zero. To make all the divs the same size, we also included a box-sizing value. For this project, we used Lato as the primary font. You can use any font you want while changing this snippet. We used the CSS flex property to style the entire layout of this project. To make the design more attractive, we gave the middle part of the three a dark blue color. We created an 'is-sticky' class and styled it such that when the user scrolls down the website, the navbar background color will turn black and the nav item color will turn white. We also set a transition value for the navbar height and color so that the navbar looks aesthetically pleasing during the transition. In the JS part, we set the code such that when pageYOffset is less than 0, the 'is-sticky' class will be triggered, but when the user moves to the top of the webpage, i.e. pageYOffset is 0, the 'is-sticky' class will be removed.

You May Also Like:

Animated Sticky Header on scroll [ Source Code ]:

To create this project, you need to create three files. The first is the HTML, and the second and third are the CSS and JS files. Please copy and paste the code below into the project files and save it. Run the project in your browser and see if it works properly. You can also download the code from the download button below this blog post.

HTML

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Sticky Header on scroll with HTML CSS and Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav id="navArea">
		<div class="logo">
			<a href="#"><img alt="your company logo" src="logo1.png"></a>
		</div>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">About</a></li>
		</ul>
	</nav>

	<section>First Section</section>
	<section>Second Section</section>
	<section>Third Section</section>

	<footer>
		All Right Reserved By your Website
	</footer>


    <script>
        window.addEventListener("scroll", function() {
            let navArea = document.getElementById("navArea");
            if (window.pageYOffset > 0) {
                navArea.classList.add("is-sticky");
            } else {
                navArea.classList.remove("is-sticky");
            }
        });
    </script>
</body>
</html>

CSS

  * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: lato;
}
#navArea {
	display: flex;
	justify-content: space-between;
	padding: 0px 10%;
	position: fixed;
	width: 100%;
	top: 0px;
	background: white;
	transition: background 0.5s;
}
section {
	height: 100vh;
	font-size: 50px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 900;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}
section:nth-of-type(1) {
	margin-top: 84px;
}
#navArea .logo img {
	height: 84px;
	transition: height 0.5s;
}
#navArea ul {
	list-style: none;
	display: flex;
	align-items: center;
	width: 400px;
	justify-content: space-around;
}
#navArea ul li a {
	text-decoration: none;
	color: #000;
	font-weight: 600;
	transition: color 0.5s;
}
#navArea ul li a:hover {
	color: deepskyblue;
}
#navArea.is-sticky {
	background: #000;
}
#navArea.is-sticky a {
	color: #fff;
}
#navArea.is-sticky .logo img {
	height: 64px;
}
section:nth-of-type(2n) {
	background: darkcyan;
	color: #fff;
}
section:nth-of-type(2n+1) {
	background: white;
	color: #333;
}
footer {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	color: #fff;
}

For increased engagement, better user experience, mobile usability and increased website conversions, a sticky navbar or header plays a very important role. Nowadays, many modern e-commerce, news & blog, corporate & business, educational, portfolio, etc. websites are using this feature. We hope you have collected the code. To get more, click on the "Load More" button on our homepage. Thank you for visiting our website.

DOWNLOAD CODE

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