Editor X: Adding and Customizing Header Scroll Effects

4 min read

Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio

Draw your visitors' attention to the header and make it stand out by adding scroll effects. When pinning your header to the page, you can also make it move, fade out or change colors on scroll.

In this article, learn how to add scroll effects to the header:

Adding a Sticky scroll effect to the header

Set your header to scroll within a page. At first, visitors see the header wherever it's positioned in your page, but it "sticks" to the screen as they scroll down.

To add a sticky scroll effect:

Select the header in your Editor.
Click Position in the Inspector .
Click the Position type drop-down menu and select Sticky.
(Optional) Add an offset value above the element which is the distance the header should always be from the top of the screen.

Adding a Pinned scroll effect to the header

Pin your header in a fixed position as visitors scroll down the page.

To add a Pinned scroll effect:

Select the header in your Editor.
Click Position in the Inspector .
Click the Position type drop-down menu and select Pinned.

Adding transitions and fill colors on scroll

When using the Pinned scroll effect, you can create eye-catching transitions and make the header's background color change as visitors scroll down the page.

To add transitions and fill colors on scroll:

Select the header in your Editor.
Add the Pinned scroll effect:
1. Click Position in the Inspector .
2. Click the Position type drop-down menu and select Pinned.
Customize your header's scroll behavior by doing the following:

Make the header move on scroll