top of page

Just Jolly Functions

Functions: Creating a Sticky Header with HTML, CSS, and JavaScript

A Sticky Header is a web design feature where the header of a webpage remains visible at the top of the page as the user scrolls down. It "sticks" to the top of the screen, ensuring that important navigation elements, such as menus or logos, are always accessible to the user, no matter how far they scroll on the page.



Sticky Header Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Header Example</title>
  <style>
    /* Basic styling */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      height: 2000px; /* Just to add some scrolling */
    }

    header {
      background-color: #333;
      color: white;
      padding: 20px 0;
      text-align: center;
      font-size: 24px;
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
      z-index: 10;
    }

    header.sticky {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      box-shadow: 0 4px 2px -2px gray; /* Optional: adds shadow effect */
    }

    .content {
      padding: 20px;
      text-align: center;
      margin-top: 100px; /* Adds margin to push content down below sticky header */
    }

  </style>
</head>
<body>

  <!-- Header Section -->
  <header id="stickyHeader">
    Sticky Header Example
  </header>

  <!-- Content Section -->
  <div class="content">
    <h1>Scroll Down to See the Sticky Header</h1>
    <p>As you scroll down, the header will stick to the top of the page.</p>
    <p>Keep scrolling to see the effect!</p>
    <!-- Add more content here to enable scrolling -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat arcu eu metus fermentum, at condimentum nisi fermentum. Sed sit amet mi non nulla luctus euismod.</p>
    <p>Morbi malesuada est felis, et condimentum augue sollicitudin ut. Integer luctus magna vel libero tincidunt, ac elementum lectus luctus.</p>
    <p>In ac neque sed erat dictum fringilla at ut risus. Curabitur euismod ante vitae eros scelerisque ullamcorper.</p>
  </div>

  <script>
    // Get the header element
    const header = document.getElementById("stickyHeader");

    // Get the offset position of the header
    const sticky = header.offsetTop;

    // Add sticky class to header when you reach its scroll position. Remove "sticky" when you leave the scroll position
    function stickyHeader() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    }

    // When the user scrolls the page, execute stickyHeader function
    window.onscroll = function() {
      stickyHeader();
    };
  </script>

</body>
</html>

Explanation:

  1. HTML Structure:

    • The header tag contains the main header content ("Sticky Header Example").

    • The div.content holds the rest of the page's content and includes additional text for scrolling.

  2. CSS Styling:

    • The header is initially positioned at the top of the page with a background color and text color.

    • When the header gets the sticky class (via JavaScript), it becomes fixed at the top using position: fixed. This ensures it stays visible at the top of the viewport as the user scrolls.

    • The z-index property ensures that the header stays on top of other elements.

    • A subtle box-shadow is added for a nice visual effect when the header becomes sticky.

  3. JavaScript Functionality:

    • The stickyHeader function checks if the page has been scrolled past the header. If it has, the class sticky is added to the header, making it fixed at the top.

    • The onscroll event is used to trigger the stickyHeader function every time the page is scrolled.

  4. Content Scrolling:

    • To make the sticky header effect noticeable, the page contains enough content (using height: 2000px;) to ensure that the user can scroll down.


Customizations You Can Add:

  • Background Color Change: You can change the background color of the sticky header once it becomes fixed by modifying the sticky class in CSS.

header.sticky {
  background-color: #111; /* Change background color when sticky */
}

  • Animation or Transition: You can animate the header's appearance when it becomes sticky by adding transitions.

header {
  transition: top 0.3s ease;
}

  • Responsive Design: You can adjust the header's size, font, and layout for different screen sizes using media queries to make the header responsive.

  • Hide on Scroll Down and Show on Scroll Up: You could further enhance the functionality by hiding the header when the user scrolls down and showing it when they scroll up.


Conclusion:

This simple sticky header implementation provides a basic but useful user interface pattern. It ensures the header remains visible while the user scrolls through the page, making it easier for them to navigate or access important elements (like navigation links or contact information). You can further customize this code based on your needs.

bottom of page