Sticky elements are initially treated as relative positioning, when the scrolling reaches the boundary, it will become fixed.

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.

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.