- From: Simon Fraser <smfr@me.com>
- Date: Sun, 01 Jul 2012 13:41:34 -0700
- To: Maciej Stachowiak <mjs@apple.com>
- Cc: Brad Kemper <brad.kemper@gmail.com>, Edward O'Connor <eoconnor@apple.com>, "www-style@w3.org" <www-style@w3.org>
On Jul 1, 2012, at 12:06 pm, Maciej Stachowiak <mjs@apple.com> wrote: > On Jun 28, 2012, at 11:16 AM, Simon Fraser <smfr@me.com> wrote: > >> On Jun 28, 2012, at 10:37 AM, Brad Kemper <brad.kemper@gmail.com> wrote: >> >>> I think this would be great. But I don't think the tbrl keywords should be only be relative to the viewport, but rather to the nearest potentially scrollable ancestor (overflow: auto | scroll). In many designs that might be the main scrollable content area with the viewport itself not scrolling at all. >> >> We've had others suggest this too. >> >> A complication is that an ancestor may only be scrollable in one direction (overflow-y: scroll), so you may want to sticky-position on the Y axis relative to your overflow:scroll ancestor, and sticky-position on the X axis relative to the viewport. That's slightly crazy. >> >>> I'm not sure what you mean by the containing box's edge, especially if you are talking about only the viewport being the measure of what the 'top: 10px' is relative to. Wouldn't it stop at the edge of the same box, ie the viewport? >> >> The sticky element is positioned inside a box that is the intersection of the viewport (inset by the top/right/bottom/left values), and the containing block (inset by the sticky element's margins). >> >> So the sticky element never escapes its containing block. > > A possible alternate rule that would address Brad's case without being *too* much more complicated: > > "The sticky element is positioned inside a box that consists of the containing block as clipped by all ancestor overflow rules." > > This would handle the case of a scrollable area that is not the viewport and would give a clear way of handling the "scrollable in only one direction" problem. Note: I don't know if this would cause significant implementation difficulties. I don't think you always want that. Imagine a scrolling box that wants sticky headers (e.g. something like the right sidebar on http://io9.com, but not fixed-position, and with the "latest stories" header being sticky). I think, most often, you want that sticky header inside the overflow:scroll to not be sticky to the viewport bounds, but to scroll out of view with its containing overflow element as you scroll the page. Simon
Received on Sunday, 1 July 2012 20:42:11 UTC