Sticky an element when scroll down with CSS

With this article, we'll learn how to create a sticky element with CSS.

Step 1, Create a HTML element with class name is sticky like this:

 <div class="sticky">Sticky content, please scroll down to see</div>
Copy this code

To stick an element when scroll down, add a bit of CSS code below for class sticky:

.sticky {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 background-color: #444;
 padding: 40px;
 text-align: center;
 font-size: 20px;
 color:  #fff;
Copy this code

Note: This solution does not work for Internet Explorer and Edge 15 or earlier versions.

Demo: Scroll down and up to see the result