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

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

Blog of Yogeshwaran