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

Ask the community
,
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.