Re: [css-position] sticky only along one axis

On Fri, 2014-03-14 at 12:26 -0400, Zack Weinberg wrote: 
> I just noticed that position:sticky is currently defined to make the
> box stick to the viewport along *both* axes.  

Actually, it is not.
It is defined to make it stick to the corresponding border. You can
specify several borders, but usually it is single border.

Here is related discussion thread:
http://lists.w3.org/Archives/Public/www-style/2014Mar/0013.html

> For a use case I
> personally care about (http://hacks.owlfolio.org/header-survey/ -
> currently faking position:sticky with JS) only *vertical* stickiness
> is desired.  The table header should scroll horizontally with the rest
> of the table.

What I see at the owlfolio page can be done for table header with:

<thead style="position: sticky; top: 0px;">


> I think it would be consistent with other similar things (overflow,
> background-repeat) to allow "position: sticky-x" or similar.  I don't
> care how it is spelled.  Probably logical as well as physical axes
> should be allowed.
> 
> Relatedly, please please make sure that sticky DOES work on <thead>
> and <tr> - both that the box sticks, and that the table continues to
> be laid out as if the box had not been removed from normal flow.  Last
> I checked, the Webkit implementation ignored position:sticky on
> <thead>. (At that time there was no Gecko implementation, so I don't
> know what it does.)

It is fixed recently on webkit and blink:
http://trac.webkit.org/changeset/162960
https://codereview.chromium.org/143653008/

There is another interesting case is sticky positioning for table
columns. The table "col" is pretty special tag and sticky positioning is
now not supported for columns, but there is clear use case for sticky
table columns.

Slava

Received on Friday, 14 March 2014 16:53:34 UTC