Re: Sticky Positioning

Hi Bjoern,

On Jun 27, 2012, at 6:44 PM, Bjoern Hoehrmann <derhoermi@gmx.net> wrote:

> * Edward O'Connor wrote:
>> Many web sites have elements that alternate between being in-flow and
>> being position:fixed, depending on the user's scroll position. This is
>> often done for elements in a sidebar that the page author desires to be
>> always available as the user scrolls, but which slot into a space on the
>> page when scrolled to the top. It can also be done for table headers
>> which remain visible after the top of the table has been scrolled off-
>> screen.
> 
> Putting something at the side is very different from putting something
> at the top or bottom. At the side sticky elements don't tend to occlude
> content, but they do at the top and bottom, and menacingly so. Typical
> toolbar-like elements for instance usually break scrolling using page-
> up and page-down keys, and they become very obnoxious when zooming, as
> they grow far too big, not to mention that they require the user to ad-
> just to a new reading position, which I find extremely annoying. I have
> in fact "Hide position:fixed" as the first item in the right click menu
> in the browser I use the most to escape this kind of UI horror.

I share your distaste for the floating toolbars that many websites stick at the top or bottom of the page these days, using fixed positioning. It's worth noting that position: sticky is not intended primarily for floating full-page toolbars. It's intended for more advanced (and less annoying) use cases. Here are some specific examples of possible use cases:

(1) A very long table in an even longer document. By making the headers sticky, they can remain in view even when the top of the table is scrolled out of the viewport, but will go away once the whole table is scrolled out of view.

(2) Sticky section headers in the style of the iPhone Contacts list. For those who have not seen this in person, the Contacts list has a header for each letter of the alphabet. The header for the current topmost section (even if partially scrolled) shows, but once the bottom-most name starting with a particular letter scrolls out of view, the header is pushed off by the next one.

(3) Sticky margin notes. Consider the implementation notes found in the margin of the whatwg HTML5 spec, such as here: <http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#the-window-object>. Currently, the notes stay in a specific position in the margin. But it would be very useful if, when the top of a section is scrolled out of view, the margin note was still visible. Sticky positioning would make it easy to do this.

(4) Differential-scrolling blogroll sidebars on blogs. Some blogs have a layout where the blogroll scrolls along with the content until the bottom of the blogroll appears, at which point it stays fixed while the content scrolls.

With position: sticky, use cases like these can all be handled conveniently without using JavaScript scroll events. This makes them compatible with advanced approaches to smooth scrolling, as Ted described. 

On the other hand, full-page floating toolbars do not really benefit from position:sticky. To the extent they "work", fixed positioning serves their needs just fine.

So please, when thinking of this feature consider use cases like the above, rather than floating toolbars.


Regards,
Maciej

Received on Thursday, 28 June 2012 19:21:42 UTC