How to make a menu appear and pin at a certain part on the page?

Ask the community
,
1

Hi there,

I am wanting the menu to appear at a certain place on the page. I am a creating a one page site but don’t want the menu to appear until after a certain way down the page.

Hope that makes sense

thanks

2

Hi @mevansisback :raised_hand_with_fingers_splayed:

You can do this with the help of the onViewportEnter() and onViewportLeave() event handlers, assuming that your header is set to " Freez ".

For example, you want the menu to disappear when reaching the contact us section.

$w('#contactUsSection').onViewportEnter((event) => {
    if (!$w('#menu').hidden) { $w('#menu').hide() }
})

And appear again when leaving the strip.

$w('#contactUsSection').onViewportLeave((event) => {
    if ($w('#menu').hidden) { $w('#menu').show() }
})

Please note that your strip must have enough height to prevent other event handlers from overlapping your defined ones above.

Hope you find this useful.
Ahmad

3

Hi @ahmadnasriya

Thanks so much for this.

Here is the code that i have written following your steps.

$w( ‘#anchor7’ ).onViewportEnter((event) => {
if (!$w( ‘#horizontalMenu1’ ).hidden) { $w( ‘#horizontalMenu1’ ).hide() }
})
$w( ‘#anchor7’ ).onViewportLeave((event) => {
if ($w( ‘#horizontalMenu1’ ).hidden) { $w( ‘#horizontalMenu1’ ).show() }
})

What i am trying to do is when the page loads and sees anchor 7 then the menu should be hidden and when you scroll out of the anchor 7 view then the menu should appear.

I’m clearly doing something wrong here as it doesn’t seem to be working

Thanks

4

@mevansisback Hide the menu as soon as the page finish loading …

$w.onReady(() => {
    if (!$w('#horizontalMenu1').hidden) {
        $w('#horizontalMenu1').hide()
    }
})

Then add a scroll function to the onViewportEnter() event.

$w('#contactUsSection').onViewportEnter((event) => {
    // The menu is already hidden
    if (!$w('#menu').hidden) { $w('#menu').hide() }
    
    // Scroll to the anchor
    $w('#anchor7').scrollTo().then(() => {
        // Show the menu
        $w('#menu').show();
    })
})

As described above, the menu will be hidden as soon as the page finish loading, when you see the anchor the page will scroll to it and then show the menu.

Hope this helps.

5

Hi @ahmadnasriya

Thanks for all of this

The first section of code works perfectly and hides the menu.

When i add the second section of coding the menu doesn’t hide/do what its meant to do and re appear.

I think the issue may be to do with what the code is looking for to allow the menu to reappear and the website can already ‘see it’ in a sense therefore it doesn’t hide it in the first place.

Also i keep getting red dot at the end of the coding?

6

@mevansisback The red tots means you have an error in your code, please share your website’s URL so I can inspect the issue better.

7

@ahmadnasriya

currently the menu is not shown as clearly im doing something wrong - when it scroll to the “My Work” it should appear

8

@mevansisback Here’s what you need to do …

  1. Delete lines (3 -6) since they’re not necessary.

  2. Change the event handler on line 14 to this

$w('#anchor7').onViewportEnter((event) => {

})

That’s it, you have an error since onViewportEnter is not a function on $w.