data-sticky sections appear to break when updating using udpate() method

[samuelgoddard]

When using the update() method, my sticky elements appear to be breaking. I've added an example project to show what I mean

https://prb-architects.netlify.app/work/the-canch

if you scroll slightly down and toggle the "project planning" accordion open, you'll see it runs the update() method to recalculate the height (which is working perfectly) but it breaks the data-sticky elements above it.

Code can be found here - https://github.com/samuelgoddard/prb-architects/blob/master/src/components/collapsible.js

Any help would be appreciated. I may be doing something wrong

[Mulegoat]

I have a similar issue here:

https://staging.reefandrainforest.co.uk/holiday-finder

If you sroll down and select something from one of the dropdown menus the sticky element does not unstick when scrolled past.

Some help would be much appreciated as I may also be doing this wrong!

[Slgoetz]

Yea, I am seeing this same issue on a project that we are working on.

[arzafran]

This seems to be a duplicate of #133 but it feels like this got more attention and has more examples. btw, I'm facing the same issue, any hint would be appreciated

[JeremyFagis]

Hey guys, any update about this sticky issue?

[aahdrien]

Hey guys, I had the same issue and managed to fix it after some troubleshooting based on the demo website. In my case, I realized that the bug occured because the data-scroll-target was a data-scroll-section. I added an div with an absolute positioning inside the section, covering the whole section, and used it as a target and now I don't have the issue anymore :)

Hoping that it will help!

[JeremyFagis]

Thanks a lot @aahdrien, it solved my issue 🙏

[artursopelnik]

The sticky elements broken if I resize my window :/ The update method can't fix them currently

[samuelgoddard]

@aahdrien 's fix also worked for me! Not ideal code but least the bug isn't happening now :) Thank you!!!

[panupatspyksw]

Hey guys, I had the same issue and managed to fix it after some troubleshooting based on the demo website. In my case, I realized that the bug occured because the data-scroll-target was a data-scroll-section. I added an div with an absolute positioning inside the section, covering the whole section, and used it as a target and now I don't have the issue anymore :)

Hoping that it will help!

can you show the structure pls

[JeremyFagis]

Hey @panupatspyksw something like that:

<section data-scroll-section>
    <div class="target"></div>
    <h1 data-scroll data-scroll-sticky data-scroll-target=".target">Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, provident ullam? Ea fugiat eum quod quasi, eligendi, officiis recusandae temporibus tenetur officia assumenda rerum incidunt consectetur reprehenderit, velit eveniet laborum...</p>
</section>

<style>
    section{ position: relative; }
    .target{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
</style>

✌️

[Neomas]

This was the fix I was looking for! Thanks 🥳

[elliottbenzle]

aahdrien worked for me. Seems like data-scroll-target can't be same as the data-scroll-section