Hi, I pinned a vertical menu for a one-page site and I would like to hide the menu when reaching the footer section (after scrolling down to the bottom of the page). I tried to do it with event and using the collapse function, but the menu only disappears completely from my site. Does anyone know how to hide 1 element from 1 specific section of the page? Thanks!
If you’re using EditorX, you don’t need to use .collapse() or any other code, just set the position to be “sticky” instead of “fixed” and put the menu inside the relevant page section.
But if you use the classic editor, you’ll have to use collapse() when the footer gets into the viewport() and expand() when the it goes out of the viewport.
P.S. on the classic editor the pinning won’t work on mobile.
Thanks for your answer @J.D. - I am using the classic editor and there is something wrong with my code. It doesn’t work. Any other tips? Thanks again!
Post your code please.
export function columnStrip1_viewportEnter ( event ) {
$w ( “#verticalMenu1” ). collapse ();}
Thanks!
@clotilde79305 Your code should collapse the verticalMenue1 once the columnStrip1 gets into viewport.
You should also add a viewportLeave event handler to .expand() the menu.
@jonatandor35 Ok. I guess I don’t know how to do that.
@clotilde79305 the same way you did the first one.
Goto the the strip property panel, toggle the viewportLeave event. It’ll add the event handler to the page code, and then put $w(“#verticalMenu1”).expand(); inside.
YES! it works now. Thank you so much! It was getting very frustrating.
You’re welcome 