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

1/3

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.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP