search

dollarshaveclub / stickybits

Stickybits is a lightweight alternative to `position: sticky` polyfills 🍬
https://github.com/yowainwright/stickybits
MIT License
2.19k stars 168 forks source link

Position absolute update breaks functionality #642

Closed rubydesign closed 4 years ago

rubydesign commented 4 years ago

Hi, while trying this out, i could not get it to work. (using 3.7.2 with foundation 6.6.1 rails 5.2) On firefox 71.0 position sticky was used. I guess "correctly", but it didn't work. So i added useFixed

Then it worked for a bit, until the second subsequent div pushed it (my menu) out of view. When looking at this i noticed that the "position: fixed, top:0" was what made it work. But then "position: absolute; bottom 0" was added and it became unstuck.

I changed the js (managestate, statestyles) to keep the "fixed, top" and all works as i would expect.

Now i am wondering what happened here. Did i misunderstand something or does my setup possibly mess with stickybits? The docs don't seem to mention any absolute positioning.

DanielRuf commented 4 years ago

Hi @rubydesign,

please provide a codepen with the code so we can reproduce and check this in detail.

rubydesign commented 4 years ago

Ok, i forked the fixed example. https://codepen.io/rubydesign/pen/abzLjBM The "more content" i added "pushes" the child out of view. And as i said, the positioning changes to absolute when that happens. Is that intentional?

mbark commented 4 years ago

I can't really see that the position: absolute causes any problems, however going from not being stuck to being stuck makes the element become fixed which causes it to not take up any space, making the "child 2" get hidden beneath "child 1". Is this the problem you are referring to @rubydesign?

rubydesign commented 4 years ago

@mbark My problem is that the element becomes unstuck by "more content" pushing it up. This may be just me ( @DanielRuf, is it?, you didn't answer that), but for me this makes it unusable.

And as i said, i don't see why the docs don't talk about what is going on with the "absolute" .

DanielRuf commented 4 years ago

Sorry, I'm working on other things in the last days. Projects at work have a higher priority at the moment.

mbark commented 4 years ago

@rubydesign I don't quite understand from the codepen what the problem is, could you post a screenshot of how it looks?

Esger commented 4 years ago

It appears that after version 3.6.8 an element with position:sticky is given position:absolute as inline style and thus overrules your own styling (initially). This breaks layouts, because position:absolute takes the element out of the normal flow and affects its width. E.g. a <div> element is 100% width of its parent normally and with position:absolute, it looses this width.

mbark commented 4 years ago

I think I fixed the problem in #658, if not then please tell me @Esger or @rubydesign!