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

Re: Sticky Positioning

From: Ryan Seddon <seddon.ryan@gmail.com>
Date: Wed, 5 Sep 2012 16:59:11 +1000
Message-ID: <CADsa-VentKk3P+xuyLBLKeqYA_Ovf6mqwpiFn=59n8TtXYcLDQ@mail.gmail.com>
To: Brian Blakely <anewpage.media@gmail.com>
Cc: "www-style@w3.org" <www-style@w3.org>, Maciej Stachowiak <mjs@apple.com>, Simon Fraser <smfr@me.com>, Brad Kemper <brad.kemper@gmail.com>, "Edward O'Connor" <eoconnor@apple.com>, Ojan Vafai <ojan@chromium.org>
> 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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:21 UTC