How do I code for scrolling header to hide when footer enters?

Ask the community
,
1

Hello! I’m new to coding and am confused as to what’s wrong with the code I added.

I successfully created a sticky header that hides and gives way to a smaller, scrolling header. Now I want the scrolling header to hide when the footer enters. Here is my successful code for the header:

$w ( “#headertransitionpoint” ). onViewportLeave (() => {
$w ( “#defaultHeaderbar” ). hide ();
$w ( “#scrollingHeaderbar” ). show ();
})
$w ( “#headertransitionpoint” ). onViewportEnter (() => {
$w ( “#scrollingHeaderbar” ). hide ();
$w ( “#defaultHeaderbar” ). show ();
})
});

Here is the code I added to hide the scrolling header when footer enters:

$w ( "#footer1" ). onViewportLeave (() => { 
    $w ( "#scrollingHeaderstrip" ). show ();

})
$w ( “#footer1” ). onViewportEnter (() => {
$w ( “#scrollingHeaderstrip” ). hide ();
})

What is wrong with this? There seems to be no effect at all, but the code passed verification (Image attached.)

Any assistance would be greatly appreciated :slight_smile: Toni

820×423 22 KB

2

Lines 14 through 19 of the code should also be inside of the page’s onReady() function.

3

Good morning, Yisrael! Thank you for your response.

That worked! LOL - I have a lot to learn. I’m very excited to have joined this community :slight_smile:

Be safe, my friend!
Toni