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

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: 
bhaskargeeksforgeeks
sagartomar9927
JavaScript-Misc
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React