Wix Sticky Header Tutorial - One Minute (2020)

So getting back to videos and uploading content for you. We have the 2020 version of creating a sticky header the quick way in 1 minute steps.

Watch how we create a Sticky Header by using 3 strips; 2 for the Header and 1 transparent to be positioned on every page of the website to call for the switch between the two strips in your Header.

Creating a Wix Sticky Header Tutorial in 1 Minute

Steps for the viewers:

Steps for the reader:

The components we used and the labels we gave them?

• 1st Strip - largeheader

• 2nd Strip - smallheader

• 3rd Strip - headerSwitchPoint

Steps we took to accomplish this visual feature:

1. Enable Velo Developer by clicking on Dev Mode in the top of page tool rail

2. Set the Header Scroll Settings to Freeze

3. Change the Header Design to None

4. Add your 1st Strip > Go to the vertical Menu click on (+) > click Strip > Classic > Change the strip Property ID from the Properties Panel (you can get to this by Tools in the top of page tool rail or right click on the strip and click "View Properties"; we labeled our 1st Strip "largeheader" as it will show once the page loads. NOTE: you can customize the strip however you would like by adding columns, menus, text, logo etc.

5. Add your 2nd Strip > Option A) if the content is staying the same as in the 1st Strip; right click the 1st Strip and select "Duplicate" and rename the Property ID "smallheader" Option B) if you look to add different content not as the same in the 1st header than go to the vertical Menu click on (+) > click Strip > Classic > Change the strip Property ID from the Properties Panel; we labeled our 2nd Strip "smallheader" as it will show once the visitor scrolls down the page.

6. Move the 2nd Strip (the Strip that will show once the visitor scrolls) into the Header

7. Check box Hidden on load in the properties panel for the 2nd strip so that visitors cannot see the strip until the command on Event is engaged.

8. Move the 1st Strip into the Header

9. Add your 3rd Strip > Go to the vertical Menu click on (+) > click Strip > Classic > Change the strip Property ID from the Properties Panel; we labeled our 3rd Strip "headerSwitchPoint" NOTE: remember to do the following tasks after you add the 3rd Strip and gave it an ID. In the Change Strip Background > Click Settings and set the Opacity and Color to 0%. Right click on the 3rd Strip and toggle switch "Show on All Pages"

10. Open the Site Code panel at the bottom of your screen

11. Click on "Site" tab - we want this feature to function on all pages of the website.

12. Erase the default code in this section if you have never placed code here before.

13. Copy and Paste the below code into the "Site" tab section

Copy and Paste the below code: What the code should look like on Site tab when completed:

$w.onReady (function () {

$w("#headerSwitchPoint").onViewportLeave(() => {

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

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

})

$w("#headerSwitchPoint").onViewportEnter(() => {

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

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

})

});

Velo Wix Code for Sticky Header Tutorial

View the old version you may have watched previously on creating a sticky header in Wix Editor.