Learn how to build a sticky header that switches between two designs as you scroll. Enable Velo code, create three strip elements with specific IDs, then use onViewportLeave and onViewportEnter events to show and hide each header at the right scroll point.
Chapters
In this video, we'll demonstrate how to create a sticky header that changes as visitors scroll through your site. We'll do this by using strip elements to create two headers and an additional strip to indicate the point on the page where they switch. Then we'll add a few lines of code for functionality. To get started, go to the editor and enable Code on the top bar. Then click on the header section of the homepage, Select Settings and choose Freezes. On the left side Add panel, choose Add Strip and drop a classic strip onto our page. This will be the default header visitors see when they're at the top of our site. We'll customize it by adding our logo, a tagline, and site menu. You can customize it however you want. Now we can Change the strip's ID. Changing element IDs helps us work with them later on. In the code, right click the strip, select View Properties, and in the Properties panel, change its id. In this example, we'll call it Default Header Strip. Now we'll create the header that appears when visitors scroll down the page. Right click the strip, select Duplicate, and customize it to your liking. In the Properties panel, we rename its ID to Scrolling Header Strip and select Hidden on Load to hide it until visitors scroll down the page. Then drag each strip and make sure they're attached to the header section of our site. Next, we need to create a strip to indicate the point on our page where we want our headers to change. From the Add panel, add another classic strip and place it where you want the change to occur. Then click Change Strip Background Settings and set the opacity and color to 0%. To make your strip transparent, change its ID to header transition Point, Right click and select show on all pages so we can use this functionality across our site. Now we can start adding our code. Open the code panel on the bottom of the screen and switch to the Site tab to make it work on all pages. We will start by adding our code under the $w onready function, which only runs once all page elements have finished loading. We use $W to select and interact with any element on our site by using its id. First, we select the header transition point and give it an onviewport Leave event. This event will trigger whenever a visitor scrolls past the point on the page where our headers change. Now we need to add the functions that switch between our two header strips. Make the scrolling header visible by using the show function, and then make the default header invisible with the Hide function. Then create another event for the header transition. Point on Viewport Enter, which will trigger when visitors scroll back up the page, this time. For the default header, use the show function, and for the Scrolling header, the Hide function. Once we're done, we click Publish for our changes to take effect. And that's it. Now you know how to create a sticky header that changes as visitors scroll through your site. Go to Wix.com for a fully detailed API reference, articles, examples, and more videos.
