Re: [css-position] events for position sticky

Doing everything in CSS is exactly what I'd love to do. Unfortunately, at
the moment I don't see how this can be achieved. That's why I feel there is
something missing in the specifications or that I'm missing.

A use case I can think of is an element that should have the width of its
parent when is not sticking and the width of the window when sticking. An
example is shown in this demo I've created:

https://jsfiddle.net/638rjsty/

And this is the result I'd like to achieve:

https://jsfiddle.net/4otjrrpf/

The second demo uses a library to simulate the support for position: sticky,
so it can be seen in any modern browser.

2016-03-15 14:51 GMT+00:00 Xidorn Quan <quanxunzhen@gmail.com>:

> On Fri, Mar 11, 2016 at 3:47 PM, Aurelio De Rosa <a.derosa@audero.it>
> wrote:
>
>>
>> Hi everyone.
>>
>> The specifications of position: sticky don't mention any event fired
>> when an element is stuck and when it returns to its original position, for
>> example something like stickystart and stickyend. I think this could be
>> very useful and it has different use cases.
>>
>> The first use case is a website that needs to decrease the margin of a
>> navigation bar when it starts sticking. Another use case might be to have
>> an element that takes the full width of the page when it's sticking but a
>> different width when it's in its original position.
>>
>> Has anyone thought about this possibility? Has this topic been discussed
>> before?
>>
>
> You should just do all of these in CSS. It doesn't seem to me any of you
> requirements is undoable in CSS. Probably you need more concrete example.
>
> In addition, what sticky wants to do is to make this effect
> JavaScript-free, so that it could be smoothly rendered. If you want to use
> JavaScript, you can just go back and listen on scroll event and do
> everything you like there. Using sticky with those two events wouldn't make
> anything better than just using scroll event, I suppose.
>
> - Xidorn
>



-- 
Aurelio De Rosa
email:  a.derosa@audero.it
website: www.audero.it
skype: AurelioDeRosa