search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.42k stars 2.25k forks source link

Flyout menus and z-index #515

Closed tsangaris closed 4 years ago

tsangaris commented 4 years ago

Environment

Hi,

I am building a website with a Navbar that has Flyout menus (something similar to Stripe.com).

Below the navbar, I have some text that I use ScrollReveal to reveal them. After I reveal them, the flyout menus are hidden behind the text.

If I go to inspect element and disable the:

transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

from the element (text), then the flyout menu is back on top of everything again.

So, to fix this I use the callback function, and I do:

function myCallback(el) { el.style.transform = null; }

Is this the appropriate way to fix this issue? Will this transform disabling affect something else?

Thanks.

jlmakes commented 4 years ago

Will this transform disabling affect something else?

As far as ScrollReveal is concerned, I don't think it breaks anything.

By removing the transform property value, you are destroying its Stacking Context (MDN). If you're looking for alternative solutions, the documentation may give you ideas on how to refactor.