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"> neveropen </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 neveropen. 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 neveropen. 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"> neveropen </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 neveropen. 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 neveropen. 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:
