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.
<!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">
w3wiki
</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:
How to make a div stick to the top of the screen ?
We will learn how to create a sticky element that stays fixed at the top of the screen even when you scroll down. We’ll be using a simple HTML div element to achieve this effect. Making elements sticky can be useful for creating navigation bars or headers that remain visible at all times, providing easy access to important information or controls on a webpage. By following the steps outlined in this article, you’ll be able to implement a sticky element in your web projects without the need for complex JavaScript or CSS techniques.
Table of Content
- Using the sticky value of the position property
- Setting the div to be stuck after it had scrolled past
Contact Us