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

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

Last Updated : 28 May, 2024

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:

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

Y

yuvraj07

Improve

Article Tags :

Similar Reads

How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ?

The Shrink Navigation bar works when the user scrolls down the page. In this article, we will use HTML, CSS, and JavaScript to design a shrink navigation bar. HTML is used to create the structure, and CSS is used to set the style of the HTML structure to make it looks good. This kind of shrinking na

How to Create Sticky Header/Footer on a Web Page using HTML CSS and JavaScript?

When designing a website, it's essential to consider the sticky header and footer. These elements enhance the user experience by keeping important navigation links accessible as users scroll. This article explores creating sticky headers and footers with CSS.We can do this by using the following CSS

How To Create a Table With Fixed Header and Scrollable Body?

Here are the methods to create a table with a fixed header and a scrollable body.Before proceeding, enhance your understanding by exploring this comprehensive guide on HTML tables.1. Using position: sticky and overflow-yThis method employs position: sticky on the table header to keep it fixed at the

How to Get and Set Scroll Position of an Element using JavaScript ?

In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of

How to Create a Change Background on Scroll using HTML CSS and JavaScript ?

In this article, we will try to change the background color of the container once the scroll occurs. If a user scrolls down the page the background color will be changed. We will use the below approach to accomplish this task.Using the scroll event on the window objectIn this approach, we will use t