viewportEnter/Leave not working

Ask the community
,
1

I’m redesigning my site, and on the home page (https://aaronhelgeson.wixsite.com/mysite) I’m trying to change between a translucent and transparent header on scrolldown.

However, the translucent header doesn’t load when scrolling down.

Any help?

Here’s the code I’m using…

$w.onReady(function () {
    $w('#translucentHeader').hide();
    $w('#transparentHeader').show();
});

export function header_viewportLeave(event) {
 let fadeOptions = {
 "duration":   300,
 "delay":      0
    };
    $w('#translucentHeader').show("fade", fadeOptions);
    $w('#transparentHeader').hide("fade", fadeOptions);
}

export function header_viewportEnter(event) {
 let fadeOptions = {
 "duration":   300,
 "delay":      0
    };
    $w('#translucentHeader').hide("fade", fadeOptions);
    $w('#transparentHeader').show("fade", fadeOptions);
}
2

Hi :raised_hand_with_fingers_splayed:

Are they exist in their element’s properties panel?

3

In the header properties, onViewportEnter sends a “header_viewportEnter” event, and onViewportLeave sends a “header_viewportLeave” event.

Should I be putting something in the #translucentHeader and #transparentHeader properties too?

3104×1978 541 KB

4

Hi,

It seems you’re missing a trigger point like and anchor to let the viewport know when you’ve scrolled past a certain point.

Feel free to follow this Wix example here , which provides the exact code you’ll need to implement this functionality.

I hope this works for you!

Best regards,
Miguel

5

Thanks! Just to clarify, I’m using the (empty) header as the trigger point in the code above. Is that no longer a valid element to use as a trigger point?

6

No problem! Correct, it no longer registers the header as a trigger point. You’d need to add an element right below the header to use the element as a trigger. It doesn’t necessarily need to be an anchor it can be a transparent line for example.

7

I’m still not getting this to work, even after adding an anchor as a trigger point.

Any ideas how to troubleshoot?

I’ve tried this several different ways with no luck.

Here’s the code I’m using now. Is something wrong with my syntax?

$w.onReady(function () {
    $w('#translucentHeader').hide();
    $w('#transparentHeader').show();
});

$w("#anchorHeader").onViewportLeave(() => {
 let fadeOptions = {
 "duration":   300,
 "delay":      0
    };
    $w('#translucentHeader').hide("fade", fadeOptions);
    $w('#transparentHeader').show("fade", fadeOptions);
})

$w("#anchorHeader").onViewportEnter(() => {
 let fadeOptions = {
 "duration":   300,
 "delay":      0
    };
    $w('#translucentHeader').show("fade", fadeOptions);
    $w('#transparentHeader').hide("fade", fadeOptions);
})
8

Got it to work after deleting the initial hide and show events.

Here’s the working code…

$w.onReady(function () {

$w("#anchorHeader").onViewportLeave(() => {
 let fadeOptions = {
 "duration":   300,
 "delay":      0
    };
    $w('#translucentHeader').show("fade", fadeOptions);
    $w('#transparentHeader').hide("fade", fadeOptions);
})

$w("#anchorHeader").onViewportEnter(() => {
 let fadeOptions = {
 "duration":   300,
 "delay":      0
    };
    $w('#translucentHeader').hide("fade", fadeOptions);
    $w('#transparentHeader').show("fade", fadeOptions);
})
})