Re: Sticky Positioning

> 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


Received on Wednesday, 5 September 2012 07:00:31 UTC