How Can I Make My Sticky Rug Grippers Sticky Again

Position: stuck; — and a way to prepare information technology

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

Sticky elements or frozen panes — as yous 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 rails of their order details when shopping online.

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

In this article, I desire to explore the shortcomings of position: sticky; — specifically how we might be able to think upward a creative technique when working with overflows, which causes frustration when working with the native solution.

My motivation for writing most this comes from reading the comments of Elad Shechter's article. I therefore wanted to "scrap in" with my feel working with position: gluey;.

NB! I will non be diving into how position: gummy; works. If you desire to learn the basics you might want to read Elad Shechter'south introductory article at https://medium.com/@elad/css-position-sticky-how-information technology-really-works-54cd01dc2d46

Let'south dive in.

The old way

Telling an element to behave both stickily and static in the browser window is somewhat challenging. Before (modernistic) browsers introduced a native solution, we had to resort to faking sticky behaviors (e.g., for headers, sidebars etc.) using javascript and position: fixed;. Javascript listens for scroll events and the element's position in the document, and one time the math adds upwards you lot add a form of, say, "pasty", which will appoint position: fixed; to the element causing it to stick co-ordinate to your instructions.

A rather complex and carefully choreographed technique for something (that ought to be) adequately straightforward. This technique comes with a few and (somewhat) obvious pitfalls:
a) the chemical element is not participating in the certificate catamenia causing a bound once information technology becomes sticky, and
b) potential performance degradation equally a result of continuous repaints and callbacks due to scroll outcome (y'all might be able to handle performance issues past using techniques such as throttling, debouncing (https://www.sitepoint.com/throttle-scroll-events/) or even Intersection Observer (https://css-tricks.com/design-v17/#commodity-header-id-3)).

The mucilaginous mode

The convenient thing about position: glutinous; is that the browser is doing all the heavy lifting for y'all. The element seamlessly participate in the flow of the document every bit well as sticking to the window once you whorl past it without causing a sudden jump.

You tin attain this with four lines of code:

          .element {
            position: mucilaginous;
            top: 0;
}        

Easy!

Nonetheless, position: glutinous; tin can become a tricky acquaintance — particularly if we innovate overflows.

Issues with overflows

Say we desire an overflowing table of columns and rows with sticky headings on a folio. Nosotros want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally inside the inundation container.

Withal, when working with overflows you lot might find that your mucilaginous chemical element isn't and then sticky subsequently all, which may cause some frustration. The browser doesn't seem to be respecting position: sticky; once nosotros add together overflow to the mix.

The issue with overflows is…

that a gummy element "sticks" to its nearest antecedent that has a "scrolling mechanism" (created when overflow is subconscious, scroll, motorcar, or overlay), even if that antecedent isn't the nearest actually scrolling ancestor. This finer inhibits any "sticky" behavior. (From MDN Web Docs)

The behavior is replicated in this codepen from Valtteri Laitinen:

This is exactly what we want, but the headings aren't sticking when nosotros vertically roll past the table. If the parent container is equipped with an flood property, then nosotros've got trouble. Once you remove overflow, the headings stick as expected (endeavour toggling the checkbox).

So how might nosotros cope with this?

Add a fixed summit

Later earthworks around the internet for answers, I establish a useful suggestion: specifying a height on our flood container.

In this simplified version, we've ready a stock-still height to our overflowing container:

While this does make the headings stick, it simply works when scrolling within the container and not on the document window.

Unfortunately, this is not what we desire.

Suggested solution

Start of all, permit's separat the headings from the table. We want the headings to be contained within their own div ("headers"), so that we can work with them separately. Let'southward assign position: sticky; to this div, and let'southward add another div inside called "scroller", so that the content tin scroll horizontally.

                      <!-- HTML -->            
<div class="wrap">                      <div grade="headers">                                <div class="scroller">                                <div grade="track">
            <div class="heading">Heading 1</div>
            </div>
            ...                      </div>
            </div>            <!-- headers -->                    ...                      /* Styles */            
.headers {
            position: sticky;
              top: 0;            
            z-index: 1;
}          .scroller {
            overflow: auto;
}        

GIF Example

Now the headings stick when we whorl on the document window. But we are not quite in that location even so. Notice that we are now able to roll both the headings and the table individually; when scrolling horizontally, the headings doesn't move aslope the tabular array columns.

In lodge to prepare this, we need to innovate a tiny script (946 bytes) to exist able to sync up the scrolling of the two containers. Past adding the course .syncscroll alongside a name attribute, we are able to achieve synced scrolling beliefs of the two divs.

In order to foreclose a scrollbar on the headings-container we also need to add:

          .scroller {
            overflow-x: hidden;
}        

This gives usa the desired result:

GIF Example

And here'southward a real-world instance:

I haven't been able to find a pure CSS solution to sync up the scrolling containers.

A note on browser support

Apart from some small-scale issues with thead in tables, browser support for position: pasty; is quite good. Nevertheless, our former friend Net Explorer doesn't recognize it, so if you want your "sticky" element to work in older browsers consider using a polyfill such equally stickyfill.

Also, remember that Safari need a prefix (position: -webkit-sticky).

That'south all — my two cents on the affair. I hope y'all enjoyed it.

Permit me know in the comments if you lot know of some other technique or if y'all just desire to comment on this article.

mcneilsuspe1938.blogspot.com

Source: https://uxdesign.cc/position-stuck-96c9f55d9526

Share this post