How to make a div stick to the top of the screen ?

Last Updated : 04 Dec, 2023

In this article, we will see how to make a sticky element that will stick to the top of the screen. Here, we have used the div to stick to the top of the screen.

Table of Content

Using the sticky value of the position property
Setting the div to be stuck after it had scrolled past

Method 1: Using the sticky value of the position property

The ‘sticky’ value of the position property sets an element to use a ‘relative’ position unless it crosses a specific portion of the page, after which the ‘fixed’ position is used. The vertical position of the element to be stuck can also be modified with the help of the ‘top’ property. It can be given a value of ‘0px’ to make the element leave no space from the top of the viewport, or increased further to leave space from the top of the viewport.

Example: This example illustrates the use of the position property to stick to the top of the element.

HTML

<!DOCTYPE html>
<html>
 
<head>
 
    <style>
        .sticky-div {
            background-color: green;
            position: sticky;
            top: 0px;
            padding: 10px 0px;
        }
 
        .start {
            height: 100px;
        }
 
        .end {
            height: 5000px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>Sticky Element</h3>
    <b>
        How to make a div stick
        to the top of the screen once
        it’s been scrolled to?
    </b>
    <p class="start">
        A Computer Science portal for geeks.
        It contains well written, well thought
        and well explained computer science and
        programming articles, quizzes and
        practice/competitive programming/company
        interview Questions.
    </p>
 
 
    <div class="sticky-div">
        This is div will stick to the top
        when it has been scrolled past
    </div>
    <p class="end">
        A Computer Science portal for geeks.
        It contains well written, well thought
        and well explained computer science and
        programming articles, quizzes and
        practice/competitive programming/company
        interview Questions.
    </p>
 
 
</body>
 
</html>

Output:

Method 2: Setting the div to be stuck after it had scrolled past

In this approach, the div is set to be fixed or relative based on scroll position. It calculates the element’s current position using getBoundingClientRect() and window.pageYOffset. If scrolled past, it sets ‘fixed’ with ‘top: 0px’; otherwise, it’s ‘relative’. The onscroll event is overridden to continuously update based on user scrolling.

Example: This example illustrates the setup for the div to stuck after it had scrolled past.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        .sticky-div {
            background-color: green;
            position: relative;
            width: 100%;
            padding: 10px 0px;
        }
 
        .start {
            height: 100px;
        }
 
        .end {
            height: 500px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        How to make a div stick
        to the top of the screen once
        it’s been scrolled to?
    </b>
    <p class="start">
        A Computer Science portal for geeks.
        It contains well written, well thought
        and well explained computer science and
        programming articles, quizzes and
        practice/competitive programming/company
        interview Questions.
    </p>
 
 
    <div class="sticky-div">
        This is div will stick to the top
        when it has been scrolled past
    </div>
    <p class="end">
        A Computer Science portal for geeks.
        It contains well written, well thought
        and well explained computer science and
        programming articles, quizzes and
        practice/competitive programming/company
        interview Questions.
    </p>
 
 
    <script>
        stickyElem = document.querySelector(".sticky-div");
 
        /* Gets the amount of height
        of the element from the
        viewport and adds the
        pageYOffset to get the height
        relative to the page */
        currStickyPos = stickyElem.getBoundingClientRect().top 
          + window.pageYOffset;
        window.onscroll = function () {
 
            /* Check if the current Y offset
            is greater than the position of
            the element */
            if (window.pageYOffset > currStickyPos) {
                stickyElem.style.position = "fixed";
                stickyElem.style.top = "0px";
            } else {
                stickyElem.style.position = "relative";
                stickyElem.style.top = "initial";
            }
        }
    </script>
</body>
 
</html>