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 Corbett on the top bar then click on the header section of the home page select settings and choose friezes 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 well customize it by adding our logo a tagline and site menu you can customize it however you want now we can change the strips 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 renamed its ID to scrolling header strip and select hidden onload 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 ad 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 dollar W on ready function which only runs once all page elements have finished loading we use dollar 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 on viewport leave event this event will trigger whenever a visitor Scrolls past a 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 slash Corvette for a fully detailed API reference articles examples and more videos .
Watch how to create a sticky header that changes as visitors scroll through your site. We’ll do this by using strip elements to create 2 headers and the point on the page where they switch, as well as a few lines of code to add functionality.
About Corvid by Wix:
Corvid by Wix is an open development platform that lets you build advanced web applications. With serverless computing and hassle-free coding, you can manage all your content from integrated databases, add your own code in the built-in IDE or work in your own environment, and connect to 100s of APIs. Plus, you get total design freedom from the Wix Editor and optimized business applications—all in one integrated platform. Build, manage, deploy and scale your next web project with Corvid by Wix.
Corvid by Wix—Accelerated Development of Web Applications