Sticky elements have the best features of both relative and fixed positioning. Elements are initially treated as relative positioning, when the scrolling reaches the end of the boundary, it will become fixed positioning.

This will stick to 200px from top, even when its container continues to scroll, until the container is no longer in view.
This is not sticky.
This is not sticky.
This is not sticky.

How does it work?

It’s very simple, we add position: sticky; to the element.

We also set either top and/or bottom positioning.

<div class="parent">
<div class="child"></div>
</div>
.parent{
height: 500px;
width: 500px;
}

.child{
position: sticky;
top: 100px;
bottom: 100px;
height: 100px;
width: 500px;
}

Troubleshooting

  • May not work if overflow is set on any of the parents elements.
  • May not work if height is set on any of the parents elements.
  • Some browsers still do not support sticky positioning.

Hey, smarty!

Login or signup to get started

What's your name?

What's your password? Lost Password
We sent a link to reset your password to your email.
Create a new password
Upload file