Re: Sticky Positioning

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