w3c / w3c/csswg-drafts

[css-position-3] Making a stickypos in a scroller also see the viewport edges

Open
#8,286 17 comments 53 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-position-3
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

Across multiple issues (and especially in https://github.com/w3c/csswg-drafts/issues/865), a persistent complaint from authors seems to be that if a stickypos element has a scrolling ancestor, it will no longer stick to the viewport edges.

For example, a table that wants sticky headers, but is wide and thus wants to be horizontally scrollable, can't be done - the headers only care about sticking in the table's own scroller, which doesn't even scroll in the vertical axis.

(See https://github.com/w3c/csswg-drafts/issues/865#issuecomment-350585274 from @valtlai for an example and demo.)

Even if we can't care about arbitrary ancestor scroll containers, the special case of caring about the outermost viewport seems high-value to address.

Can we consider doing this either always, or through a new keyword?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Read the CSS Position 3 draft and the linked #865 example first. Compare current sticky-position behavior with the requested viewport-edge behavior, then resolve whether this should apply always or use a new keyword. Done means the specification has an agreed, testable definition.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.