search

locomotivemtl / locomotive-scroll

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

Element (fixed header) disappears on window resize #497

Closed able2create closed 10 months ago

able2create commented 1 year ago

Hello 👋,

we have a WordPress website that is functioning properly without any major issues. The site has smooth scrolling, and you can check it out here: https://kourage.at/kourage-katharina-gellner/

BUT - as the Subject says - when the Window is resized - the fixed Header disappears. You can see it when you scroll beyond the Full-screen Video - which reveals the header.

We noticed that the "transform: matrix3D" values appear to reset, causing the header to move off-screen. The header only reappears after refreshing the page.

In the header, we have the following code for locomotive scroll:

<header class="site-header" data-scroll data-scroll-sticky data-scroll-target="#post-31">

This issue occurs in all major browsers. We have tried various solutions, such as:

window.addEventListener('resize', () => { locomotiveScroll.update(); });

We also attempted to move the header outside of the [data-scroll-container]. While the header no longer disappeared, the rest of the functions were compromised. The Element has to stay in the [data-scroll-container] of course...

We hope you can assist us with this issue. Thank you in advance for your help.

Best regards, Martin

able2create commented 10 months ago

Never mind. We managed with GSAP

Careen-dev commented 9 months ago

I also encountered the same problem, can you tell me how to solve it? Thank you so much

able2create commented 9 months ago

Hi,

as I mentioned - I used GSAP instead.

It worked perfectly. No weird situations which costs days to try to figure out what it could be.

Even on their own Locomotive Scroll site are issues. Fe.: scrolling back up the header disappears.

So I would suggest - go with GSAP. It is not that hard to get it running. It is stable, performant and has a huge library for options. And they respond to questions, btw...

Greetings

Careen-dev commented 9 months ago

Just as you mentioned, I previously separated the header and main into two layers, with the header not using Locomotive Scroll.

It seems like I can achieve the desired effect without using data-scroll, data-scroll-sticky, data-scroll-target, and data-scroll-container.

However, I still don't want to keep the header and main separated, as it would disrupt my header.