Create An On-scroll Animated Header Using Wix Code (Step-by-Step)

Wix is a free, easy to use platform website builder.

Hey,

Guess what?!

There is a faster and easier way to do this!

Check out the latest: Wix Sticky Header Tutorial using Velo 

We find that over 80% of the features Wix offers are not usedwhen we take on a client that is currently using Wix.

NOTE: You no longer need an Anchor in the header to complete this feature. When you add the content to the small strip you will click on viewportLeave in the properties panel and for the large strip you will click on viewportEnter

Here is what we did...

Our tutorial above will walk you through, step-by-step, how to create an On-Scroll Animated Header (sticky menu, shrinking header, shrinking menu after scrolling etc. - whatever you'd like to call it) by using Wix Code.

Wix Velo is sophisticated technology with advanced web application made simple.

For example: Database Collections, Dynamic Pages, User Input and Wix Code APIs etc.

We used our website design as an example.

Some knowledge of code is required, but if you following these steps you too can add these awesome functionalities to your website.

We love testing and we will share more in 2018. This little added functionality, believe it or not, shaved one second off our page load time.

A lot of themes we have for our WordPress sites have these functionalities already, but it's nice to know that we can now have these same features on our Wix customer sites too.

Step by Step textbook instructions to follow

Open your Wix Editor. If you don't have a Wix Account than visit here to start building your website.

Developer Tools in the Wix editor must be checked boxed as well as the properties panel.

In order for you to make the On-Scroll Animated Header work you must use the following:

1. Small strip

2. Large strip

Any other properties you would like to add:

1. Large and small logo

2. Large and small menu navigation

3. Call-to-action buttons (Free estimate, Get Quote, Schedule Now etc.)

4. Import buttons (login, phone number, directions etc.)

From top to bottom we have it organized to go into the header first to last. Reason why the anchor is furthest down the page because its the last property we add to the header section.

Before we place these properties into the header you need to make sure that the header is Frozen. Click the toggle switch on your Toolbar where it says "Freeze Position."

If you do not want the header to be in a frozen position than this design functionality is not for you.

First Step. Drag and attach the small strip to the very top of the header. Once the property has an orange boarder you know its attached. In your properties panel click on "Hidden on load"

Second. Drag and attach your small menu or in this case we attached our slogan and large button to the small strip. Once they were attached to the small strip clicked on "Hidden on load" and "Enabled by default" in the properties panel so that we can have the button work on command. If the button does not work or is gray when in preview mode, double check that the "Enabled by default" is check-marked.

Third. Drag and attach your large strip to the header section. The large strip will be the same height as your header section. No need to checkbox anything in the properties panel for the large strip as we made the proper commands in the code.

Forth. Drag and attach your logo and menu, as well as, any other elements you would like placed in the header on load. Remember to click on "Enable by default" if you are adding a button or text link.

Make sure that on the Second and Fourth step you align your elements on the strip so that it remains professional.

Fifth. Last Step - Click on the large strip and click on your properties panel and click on viewportLeave in the properties panel and for the large strip you will click on viewportEnter.

Now that we added the elements/properties that we want to the header. We can work on the code side of things so that our newly added features fire correctly when loaded on your customers screens.

Open or left the Code panel at the bottom of your screen in the Wix Editor and erase any code that was just added from the anchor property in the Page section; we don't need it as we are adding to the header which is throughout the website.

Click on Site in the Code Panel

Copy and paste the code that best reflects your setup:

Here is the code that we used in Site:

export function largestrip_viewportLeave(event, $w)

{

$w("#smallstrip").show();

$w("#slogan").show();

$w("#bigcontactbutton").show();

$w("#dkodermarketinglogo").hide();

$w("#largestrip").hide();

$w("#largenavigationmenu").hide();

$w("#smallcontactbutton").hide(); }

export function smallstrip_viewportEnter(event, $w)

{

$w("#smallstrip").hide();

$w("#slogan").hide();

$w("#bigcontactbutton").hide();

$w("#dkodermarketinglogo").show();

$w("#largestrip").show();

$w("#largenavigationmenu").show();

$w("#smallcontactbutton").show(); }

If you have any questions please comment below and be sure to subscribe to our YouTube Channel for more "simple how to" videos.

Happy Koding!