Design Website Sticky Header In HTML CSS and JavaScript – GBOB

Posted on by MUHAMMAD
Design Website Sticky Header In HTML CSS and JavaScript

In this article I am explore how to design website header through HTML, CSS and JavaScript with examples. This article for education purpose.

A sticky header is a common feature in websites where the header remains fixed at the top of the page as the user scrolls down. You can succeed this effect using in Html CSS and JavaScript. Here’s a basic code snippet for a sticky header:

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header class="sticky-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>

  <!-- Rest of your website content goes here -->

  <script src="script.js"></script>
</body>
</html>

CSS

/* Apply basic styles to the header */
.sticky-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Make sure the header appears above other content */
}

/* Style the navigation links */
.sticky-header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.sticky-header nav ul li {
  margin: 0 15px;
}

.sticky-header nav ul li a {
  text-decoration: none;
  color: #fff;
}

/* Add some padding to the content to avoid overlap */
body {
  margin-top: 80px; /* Adjust as needed based on your header height */
}

JavaScript

// JavaScript to make the header sticky
window.addEventListener("scroll", function() {
  const header = document.querySelector(".sticky-header");
  if (window.pageYOffset > 0) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
});

Example – 2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Sticky Header</title>
</head>
<body>
    <header class="sticky-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>
    <div class="content">
        <!-- Your website content goes here -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

/* Styles for the sticky header */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    z-index: 100;
    transition: background-color 0.3s ease-in-out;
}

.sticky-header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.sticky-header li {
    margin-right: 20px;
}

.sticky-header a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* Styles for the content below the header */
.content {
    padding: 50px;
}

JavaScript

// JavaScript to make the header sticky on scroll
window.addEventListener('scroll', function () {
    const header = document.querySelector('.sticky-header');
    const scrollY = window.scrollY;

    if (scrollY > 100) { // You can adjust the scroll position where the header becomes sticky
        header.classList.add('sticky');
    } else {
        header.classList.remove('sticky');
    }
});

In this code, we first create a basic HTML structure for the header and add some styles to it using CSS. The JavaScript code listens for the scroll event and adds a “sticky” class to the header when the user scrolls down, making it stick to the top of the page. The margin-top on the body is adjusted to ensure that content doesn’t get hidden behind the sticky header.

Related Posts