Sticky Header

Interactions

Keep the site header visible when a visitor scrolls the page.

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

This example demonstrates how to use events to freeze your header and change its appearance as users scroll through your site.

 

To create a sticky header, we will use two Classic Strip elements—one with a transparent background and the other with a white background. Customize the transparent Strip, adding header elements like your name, logo and a Menu. Once this Strip is designed, duplicate it and change its background color to white. Drag and drop each Strip and Attach to Header.


First, we made the white header hidden on load and added an anchor, which we'll use as a trigger point for the switch and add to it two event handlers—onViewportLeave and onViewportEnter—to change the header background as users scroll through the site.

 

You can put this either in your page code to make the change in one place, or in the site code to make it in all pages.

Next Steps

  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Corvid.

Example Code

arrow&v

Example Demonstrates

onViewportEnter

Hide & Show

More Resources

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode