How to Create a Fixed/Sticky Header on Scroll with CSS and JavaScript?

Last Updated : 28 May, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

A fixed or sticky header remains at the top of the webpage when the user scrolls down. This functionality enhances navigation and user experience by keeping important links always visible. In this article, we will explore the approach to creating a fixed/sticky header on scroll using CSS and JavaScript.

Approach

  • Create a basic HTML structure with a header element for the fixed header and a main element to some content.
  • Add some content inside main element using <p> tag.
  • Style the header such as a background color, text color, padding, and width. We will set position: relative initially.
  • Add padding to the main element and set a height to create enough scrollable content.
  • We use JavaScript to add an event listener for the scroll event on the window object.
  • Inside the event listener get a reference to the header element using its id.
  • We will use window.scrollY to get the current scroll position.
  • When the scroll position becomes greater than a specified value, we add the fixed class to the header. Otherwise we remove it.

Example: Implementation to create a fixed/sticky header on scroll with CSS and JavaScript.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <title>Fixed Header</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        header {
            background-color: rgb(19, 179, 19);
            color: white;
            padding: 10px 20px;
            position: relative;
            width: 100%;
            transition: top 0.3s;
        }

        header.fixed {
            position: fixed;
            top: 0;
            z-index: 1000;
        }

        h3 {
            color: green;
        }

        main {
            padding: 20px;
            height: 2000px;
            background-color: #ccc6c6;
        }
    </style>
</head>

<body>
    <header id="header">
        Fixed Header
    </header>
    <main>
        <h3>Welcome to GeeksForGeeks</h3>
        <h4>Scroll down to see the fixed header in action.</h4>
        <p>
            GeeksforGeeks (GFG) is a computer science
            portal founded by Sandeep Jain in 2009.
            It started as a blog to share computer
            science concepts and has grown into a
            comprehensive platform for learning
            and practicing coding. It is based in
            Noida, Uttar Pradesh, India.
        </p>
        <p>Industry: E-Learning, EdTech Product,
            Services and Operations: Provides a wide 
            range of articles on various topics related to 
            computer science and programming. Offers
            practice problems and coding competitions 
            for users to improve their coding skills.
            Provides interview experiences and preparation
            resources for tech job aspirants. Offers online
            courses and tutorials on various tech topics.</p>
        <p>
            Funding Details: The company is privately
            owned and does not disclose its financial details.
            Acquisitions: No notable acquisitions. 
            Awards and Achievements: Recognized as one
            of the most popular computer science portals
            in India.- Has a large user base of millions of
            users worldwide. Please note that the information
            provided is based on the available resources
            and may not be 100% accurate.
        </p>

    </main>

    <script>
        window.addEventListener('scroll', function () {
            const header = document.getElementById('header');
            if (window.scrollY > 50) {
                header.classList.add('fixed');
            } else {
                header.classList.remove('fixed');
            }
        });
    </script>
</body>

</html>

Output:


Next Article
How to Create a Fixed/Sticky Header on Scroll with CSS and JavaScript?

Y
yuvraj07
Improve
Article Tags :

Similar Reads