[csswg-drafts] Proposal: min-scroll-top media query (#4997)

lucpotage has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: min-scroll-top media query ==
Hi!

We currently have `position: sticky` that allows to stick an element when scrolling. However, this works when the element hits a the limits of the viewport.

I see multiple websites that display a different style for the header when scrolling and this occurs after the header is not visible anymore in the viewport.

I was thinking of a way to enable this in CSS without knowing if it would be feasible at all. In the following example, I would expect the `.global-header` to become sticky after 400px is scrolled vertically. This would prevent authors to rely on JS for this feature.

```css
.global-header {
  width: 100%;
  height: 50px;
}

@media (min-scroll-top: 400px) {
  .global-header {
     position: sticky;
     top: 0;
  }
}
```

I realize that the `scrollTop` property applies to any scrollable DOM element and that we may want to apply the media query to a specific element.

Would this make sense or is it a very bad idea? 😅

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4997 using your GitHub account

Received on Thursday, 23 April 2020 21:40:14 UTC