CSS position: sticky;

The position: sticky; property allows you to position an element based on scroll position. Set an element as sticky on the top when a user scrolls down.


You can try to run the following code to implement CSS position: sticky;

Live Demo

<!DOCTYPE html>
         div.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 10px;
            background-color: orange;
            border: 1px solid blue;
      <p>Scroll and see the effect!</p>
      <div class = "sticky">Sticky!</div>
      <div style = "padding-bottom:2000px">
         <p>This is demo text.</p>
         <p>Scroll down to view the sticky div.</p>