Re: css-position] limitations of position: Sticky

> On Oct 16, 2014, at 12:00 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 
>> On Thu, Oct 16, 2014 at 7:09 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> I've had a chance to use position: sticky on a few projects now, and while I flout very useful, there is a serious limitation that I'd like to see addressed: that it cannot be combined with other positioning. It's great when you actually want something to be static when it hasn't reached the edge yet. But what if you wanted relative positioning on it while still having the sticky qualities? Currently, you are out of luck. In my most recent case, I really wanted to keep the absolute positioning that I originally used in my layout for the element, but let it get stuck to an edge when scrolling brought it there. I ended up needing to change the html in order to make it work with position: sticky. But that isn't always an option and won't always work.
>> 
>> My proposal is to not use 'position' to achieve stickiness. Use something else, but have it work almost exactly the same way, while allowing it to be combined with position: relative or absolute. For instance, create 4 properties: sticky-top, sticky-right, sticky-bottom, sticky-right (and maybe 4 more for sticky-start, sticky-end, etc.). So you could have 'sticky-top: 0; position: absolute; top: 100px', for instance, and it would be 100px from the top of its positioning container, but would become fixed in place when scrolling brought the top edge of the element to the top edge of its positioning container.
> 
> Yeah, agree that while stickiness falls under the "positioning"
> category of things, it's not mutually exclusive with other positioning
> schemes.  Would be good to solve this in a more independent manner.
> 
>> Another
> 
> Cut yourself off here?
> 
> 

Yeah, editing out of order cause me to leave a stub there. I was originally thinking of an alternative where stickiness syntax could be similar to background-position, so that you could do 'sticky: 0' to have it stick at 4 sides, 'sticky: left 0 top 0' to have it stick at the top and left, etc., but I changed my mind because it seems more complicated to me. You'd need to have either 'sticky: 0 none none' or 'sticky: top 0' for the most common case, and I prefer 'sticky-top: 0' for that. But it is an alternative to consider, I guess.

Received on Friday, 17 October 2014 00:57:28 UTC