Fading out an element as the header fades out

Ask the community
, ,
1

Good evening Wix forum,

I’ve created a custom little drop down menu out of a box and a repeater in it so I can show images instead of just plain text, it opens up through a button in the header using a slide animation and closes through that as well. It looks great and I’m super happy with it.

You can see this in action here: https://www.dennisvdharst.com/Portfolio/Mayor

Now the header is pinned to the top of the screen and fades out when scrolling and as you may imagine, the drop down stays on the screen when it fades, which of course is not as I would like for it to work as it looks unprofessional.

Is there a way to make this drop down menu hide when the header hides through some piece of code?

With kind regards,

Dennis van der Harst

2

Try using onViewportLeave, see the api page for lots of examples to use

Something like this:

 $w("#myRepeater").onViewportLeave( () => {
  $w("#myElement").hide("fade");
 });
3

Hey there @givemeawhisky ,

That’s perfect, does exactly what I was looking for. Thank you ever so much, I didn’t think the onViewportLeave function would work since I figured the element would technically still be in the view port except just not visible. It was one of those if you think too far and complex then anything becomes more complicated than it needs to be moments.

Thanks again!

4

Although, I say that, this only seems to work when the header is at the top of the page. If it follows along, then it does seem to work…