Show and hide element on specific location

I have a pinned element that I want to toggle its visibility depending on the user “location”. I want to make the pinned element visible when the top screen of the user reach a certain point and hidden if its over it.

I’ve read a Q & A post and the solution was to use onViewportEnter, but I don’t know how to implement the wix API.

If you add some element like an anchor or a invisible box or line at the position you want to trigger first. Then you click the properties panel for that trigger object and choose the onViewPortEnter and then the code editor will pop up. In that editor do the $w(“#elementId”).show() or .hide() depending on what you would like to do.

Then you do the same on that trigger objects onViewPortLeave and the opposite.

Then when users scroll down and the trigger object will appear on screen your code will execute and when the trigger object leaves the screen the other function will execute and you are home.

Happy coding.

1 Like

This is awesome! Exactly what I just needed. Thanks for sharing this :slight_smile: