CSS position: sticky;

CSSWeb DevelopmentFront End Technology

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.

Example

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

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 10px;
            background-color: orange;
            border: 1px solid blue;
         }
      </style>
   </head>
   <body>
      <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>
      </div>
   </body>
</html>
raja
Published on 09-May-2018 08:12:45
Advertisements