Hi everyone ! Hope you can help me, I want that my header (fix) become transparent when i scroll down ?
Thanks !
You can do that using the onViewportEnter and onViewportLeave events of the header element. Inside those event handlers, using hide and show you can change the header.
For instance, you can make a box disappear (which is the background of the menu), a logo change, or any other change as the user scrolls down and the header leaves the viewport.
2 Likes
Thank you so much !
Hi Laura, were you able to get this done? Can you help me on how you did this?
1 Like
Shrinking menus on scroll is possible with #WixCode! Just a few tweaks and it can be like anything else you see out there. I made this on a Wix Code testing website in a few minutes, and you can too!
This video starts out with a sample site that uses a shrinking menu on scroll.
http://demo.templaza.com/dekor-2/?tf=1
Then I take you to my editor to see how the “hide” and “show” works “onViewportEnter” with “onViewportLeave”.
https://rocketweblabs.wixsite.com/creamcloverdesigns
Hope this helps anyone in need!
FC
6 Likes
were can i find the code for it?
1 Like
Hello Keren,
There isn’t actually code to get, you just setup the objects as hidden that you want to appear after the main menu leaves the view-port to show.
So for instance in the video above the main menu/logo is a ‘frozen’ header whose property is set to ‘collapsed’. this header will contain a second menu which appears after the page content scrolls up and leaves the view-port.
The main menu and logo are in a strip on the ‘body’ of the webpage and the elements are all set to show on every page.
then you select this strip or a trigger within (for example the menu item) and in the properties menu in developer mode click the + sign next to onViewportLeave and hit enter and click the + next to onViewportEnter and hit enter. when you do this two events will be created on the site code tab at the bottom of the editor.
the code created should look something like this.
replace ‘menu1’ with the element name of the item that will scroll out of view
replace ‘menu2’ with the element in the header that you have set to collapsed.
export function menu1_viewportLeave() {
$w(“#menu2”).expand();
}
export function menu1_viewportEnter() {
$w(“#menu2”).collapse();
}
let me know if it worked for you and if you need help troubleshooting.
1 Like
Hey Russell! I’m giving that a try, but I’m having trouble collapsing the menu. It seems headers can’t be collapsed, so I tried placing a strip of the same size over it and collapsing that. It worked, but I can still see a strip of the actual header on top of the page… How did you make it disappear completely ? Thanks!
Make sure you have no style applied to the header.
By no style, do you mean using the no color header? I tried, but same result…
how many elements do you have in the header? you sometimes have to trick the header to believe its empty. may i see a sample of the site you are working on? message me direct if you want.
I have 2, a logo and a menu. Sure!
That white strip on top is the part of the header I couldn’t hide
ok what you need to do in that case is click on the first item and using the keyboard up arrow move the whole panel up about the same amount as the white space, maybe 40 px? and then preview and see if it has diminished.
also is your header code ( for the logo and menu that scroll out of sight ) - in the site tab or the page tab?
I placed a transparent shape on top of it to do that, made it the same height as the header. It helped, the strip is thinner now, but still not gone
so lets see, you have a fully treansparent header, a fullwidth strip a menu and a logo. are all of the objects on the strip- part of the strip? if you expand the header and move the strip do all the elements move in it? if there is any independent elements then the element you collapse is going to leave anything else thats ontop of it slightly exposed. what i do in situatinos like this is to create a blank page drag all of my elements out of the header and format them to my liking then drag them onto the header and resize the header to fit the strip. then select the strip that is in the header and move it down about 3px with the down arrow. it will leave a space at the top. that should trick the header into collapsing entirely.
THIS is amazing, thank you! I am having an issue with getting the secondary menu, the one I want to be view-able as the user scrolls down to Collapse if the users scrolls back up. I hope that makes sense. If the user scrolls down and the large menu collapses it’s working perfectly. But if the user scrolls back up to the top of the page they will see BOTH menus.
In the screen shot I changed the menu I am speaking about to yellow. Can you please tell me what step I have missed.
I REALLY LOVE THIS, thank you so much for sharing your knowledge!
I have managed to get the a menu to appear and disappear as I scroll down and it works brilliantly until I navigate to another page then the code doesn’t seem to execute. It works on any page as long as I start the preview on that page. The problem persists even if I look at the published site.
I have it in the site code box and the menu is pinned to every page and is triggered by the header which is on every page. Anyone else having this issue?
$w.onReady(function () {
$w(“#MainMenu”).show(), $w(“#MainMenuBackground”).show();
});
export function header1_viewportLeave(menuAppear) {
menuAppear=$w(“#MainMenu”).show(), $w(“#MainMenuBackground”).show()
;}
export function header1_viewportEnter(menuDisappear) {
menuDisappear=$w(“#MainMenu”).hide(), $w(“#MainMenuBackground”).hide()
;}
yes ive had this issue but it has been sporadic, like based on the behaviour of the page and the elements on it. like if i have other collapsed elements on the page.
also if i click on the menu that is expanded, and it goes to another page , the page stays as if the first menu was still expanded. hope wix can fix
Glad it isn’t just me. It is fairly consistent for me, I have no other code that I have written running and there is nothing else collapsed or hidden. There is one specific page that it always works on and its subpages
Hmm
so if you preview on the sub pages it works there the first time and then when u navigate to another it doesnt work?
by the way for all who are trying to achieve this i’m trying a new method keeping all of my elements in the header and creating a transparent trigger that is set to show on every page that once it - onviewportLeave it collapses element (a: Strip + menu +logo) in the header and expands element (b: strip + menu) it is promising for every page as the code is all contained in the site code. I’m doing a similar thing in the footer with a contact form that expands when a trigger onViewportEnter.