Re: [csswg-drafts] [css-position] Sticky spacing (#4520)

To be a little more specific, the problem here is that sticky elements only get "pushed" by hitting the end of their container. If you have multiple sticky "headings" like this in a single container, they'll just overlap each other; if you make them partially transparent you'll see all the preceding sticky things are just sitting there underneath the "current" one.

This is problematic for several reasons:
1. As @argyleink says, the visual appearance of the previous sticky header being "pushed" out of the way by the new one is very appealing, but currently requires wrapper elements to be employed. (For `dl`, you can validly use `div` wrappers for the `dt`/`dd` sets now, but that wasn't always the case.)
2. Some markup patterns can't be converted into the "sibling wrapper elements" that gives the desired effect; in particular, nested document sections with sticky headings can't be changed to this without dramatically changing the document structure.
3. If your headings are differently-sized, or not fully opaque, you can see the preceding sticky elements underneath them, which is the vast majority of the time not what you want.

In order for sticky elements to get "pushed" by their container scrolling off the page, they have to handle their positioning late in the layout process anyway, as they need to know the bounds of their container. To achieve @argyleink's desired effects, sticky elements would additionally need to know, at minimum, the static positions of all their stickypos siblings, and possibly the static positions of all stickypos descendants of their container (if we want the nested-sections case to work as well), so they can stop shifting when they hit the first stickypos edge they find. I *suspect* that this isn't a huge difficulty over what exists today; the necessary information is available at the same time as the current required information.

Then just toss in a new margin-ish property to allow some gap between the old and new sticky elements, and you're golden.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4520#issuecomment-555754580 using your GitHub account

Received on Tuesday, 19 November 2019 22:56:18 UTC