Example Description
In this example site header is kept visible when a visitor scrolls the page.
How We Built It
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
Open this example in the Editor to work with the template.
Publish the site.
Learn how to work with examples in Velo.
Related Examples
Did this help?
|
Thanks for your feedback!
Hide & Show Elements
Hide and show elements in response to user interactions.
Intermediate
Hide and Show an Image
Show and hide an image according to the clicked button.
Beginner
Collapse Elements
Collapse and expand groups of elements.
Beginner
Change Site Content
Change site content in response to a user interaction.
Beginner