- From: Luc via GitHub <sysbot+gh@w3.org>
- Date: Thu, 23 Apr 2020 21:40:12 +0000
- To: public-css-archive@w3.org
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