Building a Sticky Header with HTML, CSS, and JavaScript

A sticky header, also known as a fixed header, is a website element that remains fixed to the top of the viewport as the user scrolls down the page. It allows the user to access navigation links and other important information easily, without having to scroll back to the top of the page. In this tutorial, we will learn how to create a sticky header using HTML, CSS, and JavaScript.

Step 1: HTML Structure

The first step is to create the HTML structure for our sticky header. We'll start by creating a header element with a navigation menu inside.

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Step 2: CSS Styling

Next, we'll style our header using CSS. We'll set a background color, add some padding, and set the width to 100% so that it spans the entire width of the viewport.

header {
  background-color: #333;
  padding: 10px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

Step 3: JavaScript

Finally, we'll use JavaScript to make the header sticky. We'll use the window.onscroll event to detect when the user has scrolled down the page, and then set the top property of the header to 0 so that it remains fixed to the top of the viewport.

window.onscroll = function() {
  var header = document.querySelector("header");
  var sticky = header.offsetTop;

  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
};

We also need to add a class sticky to the header element to style it when it's in its sticky state.

.sticky {
  top: 0;
  position: fixed;
}

And that's it! With these simple steps, we have created a fully functional sticky header using HTML, CSS, and JavaScript.

Conclusion

In this tutorial, we learned how to create a sticky header for our website using HTML, CSS, and JavaScript. With just a few lines of code, we were able to create a header that stays fixed to the top of the viewport as the user scrolls down the page, making navigation easier and more convenient for the user.