Hello! I am trying to make my logo appear after scrolling past a certain portion of the home page. Need help with the process and coding.

Ask the community
,
2

Set your logo to: collapsed on load
Add an anchor to you page (somewhere down the page).
Add code:

$w.onReady(() => {
    $w("#anchor1").onViewportEnter(event => {
        $w("#logo").expand();
    })
    $w("#anchor1").onViewportLeave(event => {
        $w("#logo").collapse();
    })
})

Add more anchors if needed and adjust the code in accordance.

3

Thank you for the quick reply. The steps I took are as follows -

  1. Set logo to: collapsed on load;
  2. Added an anchor and made sure it was named anchor1;
  3. Added the code you provided above exactly as is to the coding menu.

Unfortunately it did not work. Am I missing a step?

4

Make sure the property id logo the logo is “logo” (or adjust the code to your prop id.

See an example here:
https://jonatandor35.wixsite.com/test/showlogo

5

I did everything exactly as listed above and it does not work. I am very new at this so please bare with me. Before adding the code do I add any “events” under the anchor or logo properties?

6

If you use the code I posted above, here’s no need to add event listeners via the property panel.
It’s hard to say what the problem is, but maybe you put the anchor too high (so it’s always in the viewport?

7

Thanks for all the advise. This is what came up when I did exactly as listed above :

Loading the code for the site. To debug this code, open masterPage.js in Developer Tools.

Loading the code for the HOME page. To debug this code, open c1dmp.js in Developer Tools.

Thoughts on how this can be fixed?

8

This is NOT an error message, these two lines are logged so you can debug your live site.

9

Regardless, the code isn’t work in the preview. Hopefully, there is another way of making my logo disappear and appear as you scroll. Thanks!

10

The code should work just fine, maybe you’ve implemented it in a wrong way, please share your code with us, add some screenshots of the elements, collections, etc …

11

In summary:
I have an image of my logo placed in the top left side (in the header) of my homepage; labeled logo and set to collapsed on load. Further down, I have set an anchor; labeled anchor1 .

With the following code added under page NOT site:
$w.onReady(() => {
$w( “#anchor1” ).onViewportEnter(event => {
$w( “#logo” ).expand();
})
$w( “#anchor1” ).onViewportLeave(event => {
$w( “#logo” ).collapse();
})
})

12

The code must be under the Site code section in order to work on every page.

Also, the anchor must be placed somewhere you can’t see the logo from