How To Create a Sticky Header on Scroll?

Created On: 03 August 2023

A sticky header is a popular web design technique that keeps the header fixed at the top of the page, even as users scroll down the content. This provides a seamless user experience, making it easier for visitors to access important navigation options without having to scroll back to the top of the page. 

Here are steps that you can follow to Create a Sticky Header for your Webpage:


Step 1: Add the necessary HTML section.

To create a sticky header, we first need to set up the HTML structure. The header element typically contains the website logo, navigation menu, and other crucial elements. We can use the <header> tag to enclose these elements and ensure it's placed at the top of the <body> element.

HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Header Example</title>
  </head>
  <body>
    <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>

    <main>
      <h1>Welcome to Our Website</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non
        sapien vitae elit blandit bibendum a eu metus.
      </p>
      <!-- Add more content here -->
    </main>

    <footer>
      <p>&copy; 2023 Your Website. All rights reserved.</p>
    </footer>
  </body>
</html>

Step 2: Add the necessary CSS Style to fix the header on Scroll.

To make the header stick to the top of the page, we'll use CSS positioning. We can set the header's position to "fixed" to ensure it remains fixed relative to the viewport while users scroll down.

CSS Code:
header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    /* Add other styles such as height, 
    padding, and box-shadow as per your design */
}

If you want more control over the sticky header behavior, JavaScript can be used to add or remove the "sticky" class dynamically based on the user's scrolling behavior.

Javascript Code:
<script>
window.addEventListener('scroll', function() {
    const header = document.querySelector('header');
    if (window.scrollY > 0) {
        header.classList.add('sticky');
    } else {
        header.classList.remove('sticky');
    }
});
</script>

Below is the complete working example of a Sticky Header:
<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Header Example</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #333;
        padding: 10px 20px;
        color: #fff;
      }

      nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

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

      nav li a {
        text-decoration: none;
        color: #fff;
        font-size: 18px;
      }

      main {
        padding: 100px 20px;
        text-align: center;
      }

      h1 {
        font-size: 36px;
        margin-bottom: 20px;
      }

      footer {
        text-align: center;
        background-color: #333;
        color: #fff;
        padding: 10px;
      }

      /* Sticky header styles */
      header.sticky {
        position: fixed;
        top: 0;
      }
    </style>
  </head>
  <body>
    <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>

    <main>
      <h1>Welcome to Our Website</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non
        sapien vitae elit blandit bibendum a eu metus. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. Phasellus non sapien vitae elit
        blandit bibendum a eu metus. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Phasellus non sapien vitae elit blandit bibendum a eu
        metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Phasellus non sapien vitae elit blandit bibendum a eu metus. Lorem ipsum
        dolor sit amet, consectetur adipiscing elit. Phasellus non sapien vitae
        elit blandit bibendum a eu metus. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Phasellus non sapien vitae elit blandit
        bibendum a eu metus. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Phasellus non sapien vitae elit blandit bibendum a eu metus. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non sapien
        vitae elit blandit bibendum a eu metus. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit.
      </p>
      <h3>Coding is Great</h3>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non
      sapien vitae elit blandit bibendum a eu metus. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Phasellus non sapien vitae elit blandit
      bibendum a eu metus. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Phasellus non sapien vitae elit blandit bibendum a eu metus. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non sapien
      vitae elit blandit bibendum a eu metus. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Phasellus non sapien vitae elit blandit
      bibendum a eu metus. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Phasellus non sapien vitae elit blandit bibendum a eu metus. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non sapien
      vitae elit blandit bibendum a eu metus. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Phasellus non sapien vitae elit blandit
      bibendum a eu metus. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Phasellus non sapien vitae elit blandit bibendum a eu metus. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non sapien
      vitae elit blandit bibendum a eu metus. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Phasellus non sapien vitae elit blandit
      bibendum a eu metus. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit.
    </main>

    <footer>
      <p>&copy; 2023 Your Website. All rights reserved.</p>
    </footer>
  </body>
  <script>
    // JavaScript to make the header sticky
    window.addEventListener("scroll", function () {
      const header = document.querySelector("header");
      if (window.scrollY > 0) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    });
  </script>
</html>
Output:
Sticky Header Example

Pro-Tip: For simple cases, where you need the header to stick only during a certain scroll range, the CSS position: sticky property can be used.

CSS Code:

header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    /* Add other styles as per your design */
}

⚡ Please share your valuable feedback and suggestion in the comment section below or you can send us an email on our offical email id ✉ algolesson@gmail.com. You can also support our work by buying a cup of coffee ☕ for us.

Similar Posts

No comments:

Post a Comment


CLOSE ADS
CLOSE ADS