The shortcomings of position: sticky; when working with overflow.
Sticky elements or frozen panes — as you might know them by — have been around forever in software programs — especially in rows/columns based applications such as Microsoft Excel.
Sticky elements are also widely used in mobile (native) applications and in web design. Such elements help users keep a sense of perspective when sorting through long lists or keeping track of their order details when shopping online.
In this article, I want to explore the shortcomings of position: sticky; — specifically how we might be able to think up a creative technique when working with overflows, which causes frustration when working with the native solution.
My motivation for writing about this comes from reading the comments of Elad Shechter’s article. I therefore wanted to “chip in” with my experience working with position: sticky;.
NB! I will not be diving into how position: sticky; works. If you want to learn the basics you might want to read Elad Shechter’s introductory article at https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46
Let’s dive in.