W3C home > Mailing lists > Public > www-style@w3.org > September 2012

Re: Sticky Positioning

From: Simon Fraser <smfr@me.com>
Date: Wed, 05 Sep 2012 12:48:17 -0700
Cc: Brian Blakely <anewpage.media@gmail.com>, "www-style@w3.org" <www-style@w3.org>, Maciej Stachowiak <mjs@apple.com>, Brad Kemper <brad.kemper@gmail.com>, Edward O'Connor <eoconnor@apple.com>, Ojan Vafai <ojan@chromium.org>
Message-id: <7539C2CB-4F72-4E18-ADEE-D432ED34FBBE@me.com>
To: Ryan Seddon <seddon.ryan@gmail.com>

On Sep 4, 2012, at 11:59 PM, Ryan Seddon <seddon.ryan@gmail.com> wrote:

> 
> Slightly off-topic, but is there room in Media Queries for viewport scroll position?
> 
> In practice…
> h2 {
>     position: static;
> }
> @media (scroll-top: 10px) {
>     h2 {
>         position: fixed;
>         top: 0;
>     }
> }
> 
> I agree with Brian this should be a media query and not a CSS value extension to position. 
> 
> A scroll position media query gives you much greater control over what an element should do when a certain scroll position is met.
> 
> One use case would be creating a slim lined version of your navigation once the user scroll past a certain point with this MQ it'd be very easy.
> 
> Another off the top of my head is being able to use this within scrollable containers that have overflow: auto set.
> 
> As well as having a scroll-top a scroll-left or better yet a scroll-start to factor in ltr/rtl layouts. I could then do AND/OR conditions for the scroll position for greater control.
> 
> @media (scroll-top: 15px) and (scroll-start: 200px) {
>     // alter elements based on multiple scroll positions
> }

I disagree on the scroll position media query approach here. It would require that any design change on the page that affects the scrolling constraints of a sticky element would have to be reflected in the media queries. Those scroll offsets would be mysterious values that will probably have to be determined by trial and error, and would probably be easily broken on the system of users who have a different default font size, or narrower browser window.

Having the position of an element constrained by the combination of its containing block and the viewport (or an overflow ancestor) is much easier to author and maintain.

Simon
Received on Wednesday, 5 September 2012 19:48:48 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:59 GMT