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

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

Last Updated : 25 Jul, 2024

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:

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: 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>&copy; 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>

Output:

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

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

S

saurabhkumarsharma05

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 a Fixed/Sticky Header on Scroll with CSS and JavaScript?

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 JavaScr

How to create a Landing page using HTML CSS and JavaScript ?

A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v

How to Create Tab Headers using CSS & JavaScript?

Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hi

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

How to create swinging Image Hanger using HTML and CSS ?

In this article, we will learn how to create a type of Image Hanger that undergoes a swinging motion using HTML and CSS. This can be used to add interactivity to the page or highlight an image to draw attention.Approach:We will first create an HTML file in which we are going to add an image for our