CSS sticky

The “position: sticky;” is the position of the element based on the scroll position of the user. It is also used to place an item behind another element and also useful for the scripted animation.

Example:

<!DOCTYPE html>
<html>
 <head>
  <style>
   body{
   text-align:center;
   }
 .stick{
  position: sticky;
  top:50px;
  padding: 10px;
   font-size:20px;
   font-weight:bold;
  background-color: #66ffff;
  border: 1px solid blue;
 }
  </style>
 </head>
 <body>
  <h1>Scroll and see the effect!</h1>
  <div class = "stick">Sticky Element</div>
  <div style = "padding-bottom:2000px">
   <h2>Hello World</h2>
   </div>
 </body>
</html>

OUTPUT:

CSS sticky