How to use the sticky value of the position property In Javascript
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.
<!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">
w3wiki
</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:
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