Position: stuck; — and a Way to Fix It – UX Collective

The shortcomings of position: sticky; when working with overflow.

Dannie Vinther

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.

Dribbble Shot from Jackson T Owens — https://dribbble.com/shots/5250649-Cart-Checkout-Flow

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.

Author: Dannie Vinther

Collect by: uxfree.com