Slider

How To Create a Sticky Header on Scroll?

Here are steps that you can follow to Create a Sticky Header for your Webpage: To make the header stick to the top of the page, we'll use CSS posit
By on 0

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 */
}
0

No comments

Post a Comment

Subscribe to: Post Comments (Atom)
both, mystorymag

DON'T MISS

Tech News
© all rights reserved
made with by AlgoLesson
Table of Contents