Animated Sticky Header on scroll with HTML CSS and Javascript

byCodingFlicks -September 27, 2020

0

Animated Sticky Header on scroll with HTML CSS and Javascript

Today I will share a snippet based on creating an animated sticky header using HTML, CSS, and javascript. Previously I have shared a snippet about Responsive Navigation Menu using HTML & CSS Only. Check out that snippet if you haven't already.

Previously I have shared a couple of navbar snippets but in this project is about a sticky header or sticky navbar. What I have tried to achieve here is when a user will scroll down the website, the navbar will stick on top of the webpage. The background color of the navbar will also change. All these will happen with a smooth transition effect.

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.

You may also like:

In the CSS, we initially clean up the default margin padding of the document by setting them to zero. To make all the divs size the same, I have included a box-sizing value as well. For this project, I have used lato as the primary font. You can use whatever fonts you want during the modification of this snippet. I have used CSS flex property to style the whole layout of this project. I have given the middle section of the three a dark cyan color to make the design lucrative. I have created an 'is-sticky' class and styled it like when the user will scroll down the website, then the navbar background color will change to black, and the nav item color will change to white. I also set a transition value for the navbar's height and color so that the navbar looks aesthetic while the transition occurs. In the js part, I have set the code like when the pageYOffest will less than 0, then the 'is-sticky' class will be triggered, but when the user goes on top of the webpage means pageYOffset is 0, then the 'is-sticky' class will be removed.

To create this project, you have to make three files. The first one is HTML, and the second and third one in CSS and jas file. Please copy the code below and paste them to the project and save. Run the project to your browser and make necessary changes according to your needs.

HTML

<nav id="navArea">
<div class="logo">
  <a href="#">
    <img src="https://i.postimg.cc/Wz2dVb1j/logo1.png" alt="your company logo">
  </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>

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: 500px;
padding: 200px 0;
font-size: 50px;
text-align: center;
text-transform: uppercase;
font-weight: 900;
}

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.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;
}

JS

window.addEventListener("scroll", function() {
let navArea = document.getElementById("navArea");

if (window.pageYOffset > 0) {
navArea.classList.add("is-sticky");
} else {
navArea.classList.remove("is-sticky");
}
});

I hope you like this small snippet I shared. Please follow our social media profiles to stay connected.

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