[mediaqueries] Proposal for scroll-position Media Query

More and more websites feature stylistic changes that are triggered via
javascript once or after the user reaches a certain point scrolling down
the page.

I think a CSS Media Query for "scroll-position" would be incredibly
beneficial for the web and could tackle a large range of issues relevant to
the current state of web design without introducing a stockpile of new and
fragmented CSS properties.

This is how I think it could work:

   - Three new CSS Media Queries, "scroll-position-x", "scroll-position-y",
   and a shorthand "scroll-position" queries.
   - These media queries ideally accept pixel values (scroll-position-y >
   500px), percentage values (scroll-position-x >= 50%), em, rem, viewport
   units, etc., but also textual values that are relative to the document
   (scroll-position-y: bottom).
   - I think it would be very useful if scroll-position Media Queries could
   also be triggered when a user scrolls to an element in the query. This
   should include a point in relation to the element which the media query
   targets (e.g. if I want the query to be applied at a point shortly before
   scrolling to the element or applied when reaching the center of the
   element). This might be achieved with something like (scroll-position-y >=
   [element, [trigger-reference-y]]).

A whole lot of tricky problems that are currently being dealt with in
websites today such as Sticky positioning, scrolling shadows, animations
triggered at a certain scroll point, etc. could be solved with a Media
Query for scroll-position.

One major problem I can think of is how it could be possible to have the
media query target the scroll-position of a specified element in addition
to the document's scroll position. I am open to ideas on how that could be
included in this proposal.

- Bennett Feely
  http://bennettfeely.com