Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX STICKY MENU COLLAPSING HEADER
Need a collapsing header with sticky menu? This tutorial will show you how to create a collapsing header with sticky menu for your Wix website using Wix Code. Make your website look more professional with custom animations. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
Create a header strip with your logo and menu. Next add a strip with a second menu and pin this to the top of your webpage. Then create a small transparent box and position it at the top right corner of your webpage. Finally, add the Wix Code to your website.
When visitors scroll through your page, the header will collapse and the menu will be pinned to the top of the page.
When visitors scroll through your page, the header will collapse and the menu will be pinned to the top of the page.
Create a header strip with your logo and menu. Next add a strip with a second menu and pin this to the top of your webpage. Then create a small transparent box and position it at the top right corner of your webpage. Finally, add the Wix Code to your website.
THE ELEMENTS
The Page
Strip 1 (#header1)
-
Menu Element: #menu1
-
Logo Image: #image1
Strip 2 (#header2)
-
Menu Element: #menu2
Box Element: #trigger (transparent)
THE CODE
Site Code
export function trigger_viewportEnter(event, $w) {
$w("#header1").expand();
$w("#header2").collapse();
}
export function trigger_viewportLeave(event, $w) {
$w("#header1").collapse();
$w("#header2").expand();
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.