css-position] limitations of position: Sticky

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. 

Another 


Brad Kemper

Received on Thursday, 16 October 2014 14:09:37 UTC