Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 12 May, 2022

In this article, we will know 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. We will understand its implementation by using the below 2 methods.

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: 500px;
        }
    </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 
 

This method attempts to emulate the “position: sticky” method. The element is set to ‘fixed’ or ‘relative’ depending upon whether the user has scrolled past the element.
The element to be stuck is first identified and its current position on the page is calculated. This is done by adding the position of the element relative to the viewport with the current scroll position.

The getBoundingClientRect() method returns a DOMReact object of which the ‘top’ value could be used to get the position relative to the viewport. The current vertical scroll position can be found out by using the window.pageYOffset property. Adding both these values would give us the position of the element on the page regardless of the current scroll position.

The onscroll method is then overridden with a new function to calculate the current scroll position and compare it to the element’s position on the page. If the vertical scroll is more than the element’s position, the position property is set to ‘fixed’, and the ‘top’ property is given a value of ‘0px’. Otherwise, the position is set to ‘relative’, and the ‘top’ property is reset using the ‘initial’ value.

This will compare and make the element stick whenever the user scrolls past the element. 

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>


Output: 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!