<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body{
height: 1500px;
}
div{
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
margin-bottom: 15px;
background-color: #bfbfbf;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>CSS position Property</h1>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
<div>
I will stick, when I reach the top of the page.
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementsByTagName("div")[0];
function myFunction(){
x.style.position = "static";
}
</script>
<p><strong>Note</strong>: Check the following</p>
<ul>
<li>Try to scroll the page and you will find that the position of the div is sticky when it reach the top of the page.</li>
<li>Now click on the button to set the div's position to static (default) and scroll the page. Now, you will find that the div is normal just like any other elements.</li>
</ul>
</body>
</html>