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

Last Updated : 06 Sep, 2023

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 properties

Position: sticky; is a CSS property that enables an element to transition between relative and fixed positioning depending on the user’s scroll position. This property is commonly used for sticky headers or navigation menus, ensuring their visibility and accessibility throughout the page scroll, thus enhancing the user experience with consistent navigation.
Position: fixed; is a CSS property that positions an element relative to the browser window (viewport) and keeps it fixed in that position while scrolling. It removes the element from the normal document flow, ensuring it remains unaffected by scrolling or layout changes. The precise location of the fixed element within the viewport is determined using the `top`, `bottom`, `left`, or `right` properties.

Syntax: To make a sticky header, CSS position, and the top property can be used.

.header {
    position: sticky;
}

Sticky footers are like sticky headers, but with differences.

.footer {
    position: fixed;
}

Approach 1: Using CSS

This HTML and CSS code constructs a web page with a sticky header and fixed footer. The CSS styles establish the layout: a sticky header with a navigation menu and a fixed footer displaying copyright text. The content area has a bottom margin to accommodate the sticky footer. The header remains at the top, while the footer is fixed at the bottom. This basic approach focuses on CSS for layout and positioning. To achieve dynamic footer sizing, JavaScript could be introduced to adapt the footer’s behavior based on content height and window size.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Create Sticky Header/Footer on a Web Page 
        using HTML CSS and JavaScript 
    </title> 
  
    <style> 
        body { 
            margin: 0px; 
            padding: 0px; 
            box-sizing: border-box; 
        } 
  
        .header { 
            position: sticky; 
            top: 0; 
            text-align: center; 
            background-color: lightgray; 
            padding: 20px; 
        } 
  
        .navigation ul { 
            list-style-type: none; 
            padding: 0; 
            margin: 0; 
        } 
  
        .navigation li { 
            display: inline; 
            margin-right: 10px; 
        } 
  
        .navigation a { 
            text-decoration: none; 
            color: #333; 
        } 
  
        .footer { 
            position: fixed; 
            bottom: 0; 
            width: 100%; 
            background-color: lightgray; 
            padding: 10px; 
            text-align: center; 
        } 
  
        .content { 
            margin-bottom: 100px; 
        } 
    </style> 
</head> 
  
<body> 
    <header class="header"> 
        <h1>Sticky Header</h1> 
        <nav class="navigation"> 
            <ul> 
                <li><a href="#">Home</a></li> 
                <li><a href="#html">HTML</a></li> 
                <li><a href="#css">CSS</a></li> 
                <li><a href="#js">JavaScript</a></li> 
            </ul> 
        </nav> 
    </header> 
  
    <div class="content"> 
        <h2 style="text-align: center;" id="html"> 
            HTML 
        </h2> 
  
        <p> 
            HTML stands for HyperText Markup Language.  
            It is used to design the web pages. With  
            the help of HTML, you can create a complete  
            website structure. HTML is the combination  
            of Hypertext and Markup language. Hypertext 
            defines the link between the web pages and  
            markup language defines the text document  
            within the tag that define the structure  
            of web pages. 
        </p> 
  
        <h2 style="text-align: center;" id="css"> 
            CSS 
        </h2> 
        <p> 
            CSS (Cascading Style Sheets) is used to  
            styles web pages. Cascading Style Sheets  
            are fondly referred to as CSS. The reason  
            for using this is to simplify the process  
            of making web pages presentable. It allows  
            you to apply styles on web pages. More  
            importantly, it enables you to do this  
            independently of the HTML that makes up  
            each web page. 
        </p> 
  
        <h2 style="text-align: center;" id="js"> 
            JavaScript 
        </h2>         
        <p> 
            JavaScript is a lightweight, cross-platform,  
            single-threaded, and interpreted compiled  
            programming language. It is also known as  
            the scripting language for webpages. It is  
            well-known for the development of web pages,  
            and many non-browser environments also use it. 
            JavaScript is a weakly typed language ( 
            dynamically typed). JavaScript can be used  
            for Client-side developments as well as  
            Server-side developments. JavaScript is both  
            an imperative and declarative type of language.  
            JavaScript contains a standard library of  
            objects, like Array, Date, and Math, and a  
            core set of language elements like operators,  
            control structures, and statements.  
        </p> 
    </div> 
  
    <footer class="footer"> 
        <p>© 2023 GFG. All rights reserved.</p> 
    </footer> 
</body> 
  
</html>

Output:

sticky-header-1

Approach 2: Using JavaScript

The HTML structure consists of a header featuring navigation links, a main content area section encompassing substantial text, and a footer that showcases a copyright notice. The CSS file contains definitions for the layout of a webpage. It specifies the visual appearance of key elements such as the header, footer, and content section. These style rules contribute to creating an appealing design for the website. JavaScript utilizes modularization with two functions. One of these functions, known as toggleStickyClass, is responsible for managing the addition or removal of the ‘sticky’ class for elements based on both the scroll position and an offset value provided. The other function, handleScroll, ensures the proper behavior of sticky elements by invoking toggleStickyClass for both header and footer elements when users scroll.

Syntax:

header.classList.toggle('sticky', isPastHeader);   
footer.classList.toggle('sticky', isPastFooter);

Example 2: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Using JavaScript</title> 
</head> 
<style> 
    body { 
        margin: 0; 
        font-family: Arial, sans-serif; 
    } 
  
    header, 
    footer { 
        background-color: #333; 
        color: #fff; 
        padding: 10px 0; 
        text-align: center; 
    } 
  
    nav ul { 
        list-style: none; 
        padding: 0; 
    } 
  
    nav li { 
        display: inline-block; 
        margin-right: 20px; 
    } 
  
    nav a { 
        text-decoration: none; 
        color: #fff; 
    } 
  
    nav a:hover { 
        color: red; 
    } 
  
    main { 
        padding: 20px; 
    } 
  
    section { 
        background-color: #e6e6e6; 
        padding: 20px; 
        border-radius: 5px; 
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); 
    } 
  
    footer { 
        position: fixed; 
        bottom: 0; 
        width: 100%; 
    } 
  
    .sticky { 
        position: sticky; 
        top: 0; 
        z-index: 100; 
    } 
  
    p { 
        text-align: center; 
    } 
</style> 
  
<body> 
    <header class="sticky"> 
        <nav> 
            <ul> 
                <li><a href="#html">HTML</a></li> 
                <li><a href="#css">CSS</a></li> 
                <li><a href="#Js">JavaScript</a></li> 
  
            </ul> 
        </nav> 
    </header> 
  
    <main> 
        <section> 
            <h1 style="color: green; text-align: center;" 
                id="html"> 
                HTML 
            </h1> 
            <p> 
                HTML stands for HyperText Markup Language. 
                It is used to design the web pages. With 
                the help of HTML, you can create a complete 
                website structure. HTML is the combination 
                of Hypertext and Markup language. Hypertext 
                defines the link between the web pages and 
                markup language defines the text document 
                within the tag that define the structure 
                of web pages. 
            </p> 
            <h1 style="color: green; text-align: center;" 
                id="css"> 
                CSS 
            </h1> 
            <p> 
                CSS (Cascading Style Sheets) is used to 
                styles web pages. Cascading Style Sheets 
                are fondly referred to as CSS. The reason 
                for using this is to simplify the process 
                of making web pages presentable. It allows 
                you to apply styles on web pages. More 
                importantly, it enables you to do this 
                independently of the HTML that makes up 
                each web page. 
            </p> 
            <h1 style="color: green; text-align: center;" 
                id="Js"> 
                JavaScript 
            </h1> 
            <p> 
                JavaScript is a lightweight, cross-platform, 
                single-threaded, and interpreted compiled 
                programming language. It is also known as 
                the scripting language for webpages. It is 
                well-known for the development of web pages, 
                and many non-browser environments also use it. 
                JavaScript is a weakly typed language ( 
                dynamically typed). JavaScript can be used 
                for Client-side developments as well as 
                Server-side developments. JavaScript is both 
                an imperative and declarative type of language. 
                JavaScript contains a standard library of 
                objects, like Array, Date, and Math, and a 
                core set of language elements like operators, 
                control structures, and statements. 
            </p> 
        </section> 
    </main> 
  
    <footer class="sticky"> 
        <p>© 2023 Geeksforgeeks. All rights reserved.</p> 
    </footer> 
  
    <script> const header = document.querySelector('header'); 
        const footer = document.querySelector('footer'); 
        const headerOffset = header.offsetTop; 
        const footerOffset = footer.offsetTop; 
  
        function handleScroll() { 
            if (window.pageYOffset >= headerOffset) { 
                header.classList.add('sticky'); 
            } else { 
                header.classList.remove('sticky'); 
            } 
  
            if (window.pageYOffset >= footerOffset - window.innerHeight) { 
                footer.classList.add('sticky'); 
            } else { 
                footer.classList.remove('sticky'); 
            } 
        } 
  
        window.addEventListener('scroll', handleScroll); 
    </script> 
</body> 
  
</html>