locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.
https://locomotivemtl.github.io/locomotive-scroll
MIT License
7.91k stars 1.12k forks source link

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

Open samuelgoddard opened 4 years ago

samuelgoddard commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

arzafran commented 4 years ago

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 commented 4 years ago

Hey guys, any update about this sticky issue?

aahdrien commented 4 years ago

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 commented 4 years ago

Thanks a lot @aahdrien, it solved my issue 🙏

artursopelnik commented 4 years ago

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

samuelgoddard commented 3 years ago

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

panupatspyksw commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

This was the fix I was looking for! Thanks 🥳

elliottbenzle commented 2 years ago

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