02/08/2020
A brief about our 1st work:
CSS Position Sticky: The recent Trend in Cross-Browser Web Development
Seven to eight years back CSS developers dropped another child to the positioning element which already had four children. The name of this element was “sticky” because all it does is getting stick to the view port and just be in your sight all the time (depending on the developer though). Although the sticky property of an element gives a particular name to a particular property in CSS, it does not bring anything “new” to the table. I mean, if currently, I say, “let’s use a sticky div box”, you know what I am talking about but before its release people would just define what they wanted to do like “Can I have a div box that would be always visible or available even the people are scrolling?.” Well, the reason why I brought it up is to tell you that stickiness existed in the web development long before it was introduced as a standard in CSS. In this post, we will stick to the CSS property only but it is better to briefly see how people used the sticky property before its release.
Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!
According to MDN:
“Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned”.