Position:sticky

Hello everyone, Welcome to my first post of 2021.

What is position:sticky ?

Sticky is simply the combination of fixed and relative positions. Sticky Elements remain relative untill it touches the declared threshold level.

.sticky{
  position:sticky;
  //Related Elements become fixed at their top:0
  top:0;
}

Simple example of sticky - Article with sub titles

See the Pen position:sticky by yogeshwaran
(@yoyo) on CodePen.

Can i use sticky in my project ?

All latest browser supports sticky except in HTML table’s th or tr.If you are not considering IE11. you should definetly give a try on this.

See Browser support table here