How to add a scroll effect to the header in Studio Two
Updated: 2 days ago
Select the header in the Studio Two editor, click Change Behavior on the action bar, and pick a Scroll effect: Scroll with site, Disappear, Freeze or Fade out. Then open All design options and expand Header settings in the Inspector to adjust overlap, color and timing. The effect applies on every page that uses this header.
Status: The Studio Two editor article states it refers to the editor released in November 2026. The sources mention no other limits on availability.
Before you start
You need a site open in the Studio Two editor.
Check that Advanced settings are off for the header. The Scroll effect dropdown only shows when they are off.
Know which pages share this header, because the effect applies to all of them.
Step by step
Select the header. Open your site in the editor and click the header. The action bar appears.
Choose a scroll effect. Click Change Behavior on the action bar and select a Scroll effect. The options covered here are Scroll with site, Disappear, Freeze and Fade out.
Open the header settings. Click All design options to open the Inspector panel. Click Header settings to expand the section.
Set the overlap. For Disappear, Freeze and Fade out, choose an Overlap. With None, the header keeps its own space and you can set a Top offset (%). With Next section, the header sits over the next section, and you can turn on Set to bottom of screen to move it to the bottom.
Add a color while scrolling. Turn on the Color while scrolling toggle to change the header background as visitors scroll. Then pick a color and set its opacity.
Tune the movement for Disappear. Set Direction to choose where the header goes as it leaves. Set Distance to control how much of it moves; at 100% it leaves the screen completely. Then set Delay (sec), Duration (sec) and Ease.
Tune the timing for Fade out. Fade out has no direction or distance. Set Delay (sec) to decide when the effect starts, and Duration (sec) to decide how long it lasts.
Remove the effect if needed. Select the header, click Change Behavior and choose Scroll with site from the Scroll effect dropdown. The header keeps its design, and only the scroll behavior changes.
Use advanced settings for finer control. Click the More Actions icon at the top of the Inspector and turn on Advanced settings. Under Header settings, choose a Position type: Default, Sticky or Pinned, and set its options.
Good to know
The effect applies on every page where this header appears. Pages with a different header keep their own scroll effect.
Scroll with site is the default and has no further settings.
Freeze has only Overlap and Color while scrolling. It has no direction, distance, delay or duration.
In advanced settings, Sticky can stick to Top, Bottom or Bottom and top, and has a Keep in front checkbox. Pinned fixes the header over the content and applies to all breakpoints.
Advanced settings also switch the Size fields to advanced units such as %, vh and more. Press Option + I or Alt + I to turn them on or off.
parnii note
Because a header effect applies to every page that uses the header, check a few different pages after changing it. If you need a different behavior on some pages, those pages need their own header.
FAQ
Why can't I see the Scroll effect dropdown in Studio Two?
Advanced settings are probably turned on for the header. The dropdown only appears when they are off. Press Option + I or Alt + I to switch them off.
What is the difference between a scroll effect and the Motion tab?
A scroll effect controls how the header behaves as the page scrolls. The Motion tab adds another layer of movement, such as a hover or click animation.
How do I make the header stick to the bottom of the screen?
Use Set to bottom of screen with the Next section overlap. In advanced settings, you can also use Sticky with Stick to set to Bottom, or Pinned with the bottom toggle.
Sources
Part of our Wix Studio Two series (Studio 2). Last checked: 02 November 2026.
