How to hide vector and unhide on scroll

Ask the community
, ,
1

Question:
[Clearly ask your question.]
I have a vector (nav menu) at the top right of my home page that I want to be hidden when the webpage is still and I want it to appear when I scroll up or down?

Product:
[Which editor or feature is your question most relevant to? e.g. Wix Editor, Wix Studio Editor.]
Wix editor ?

What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]

I have a fixed header that has a vector that I want to be hidden when the page is still and I want it to appear when the user scrolls down or up the page and hidden again when the page either isn’t scrolling or when it reaches the top

What have you already tried:
[Share resources, forum topics, articles, or tutorials you’ve already used to try and answer your question.]

I’m new to wix but I’ve tried using the AI and it just hides the vector but doesn’t appear.

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

2

You can add a small container on the top of the hero section and code this in velo

$w("#myElement").onViewportEnter((event) => {
 $w('#myvector').hide("slide");
});
$w("#myElement").onViewportLeave((event) => {
 $w('#myvector').show("slide");
});
3

I think they want the element to only be shown during the scroll itself

1 Like
4

I did this but it didnt work not sure why but is the container suppose to overlay the vector? I overlayed the container and ran the code but it does nothing. When I moved the container to the side to see if the vector itself was changing due to the code. It disappeared on entering but never came back.

5

Either this or if the vector can be hidden when at the top of the webpage only.

6

Unfortunately though, I do not think this is possible, Wix does not have a scroll event to react to

7

Hi, @Barahona_Peter !!

It’s not possible with Wix’s built-in features alone, but you can achieve it by using a custom element to capture the scroll events for the entire site. Give it a try! :raised_hands: :smiling_face_with_sunglasses:

1 Like
8

If you so badly need it, then an unconventional approach would be to use a setTimeout() function (500 milliseconds or so) and repeatedly store the scroll position in a variable. Then check the current scroll position and if there’s a difference in the two values, that would indicate that the user is scrolling…

Here you will have to get a little creative and play around with the values and delays to come to an optimum, lag free UX. Also since your menu is in the header, you would have to write code inside masterPage.jswhich I’m not sure if it would return accurate scroll values using wix-window-frontend.

9

yea thanks for the explanation. I see what you’re saying but yea it dont need it that bad. I saw it on another page and it seemed like it was a shop,bitcommerce, or wix site so I figured wix would but its cool. Appreciate the responses