Position:sticky

yogeshktm

yogeshwaran

Posted on January 9, 2021

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;
}
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
yogeshktm
yogeshwaran

Posted on January 9, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related