Studio Editor: Adding Header Scroll Effects
6 min read
Change the way the header looks on scroll by adding transition effects. Make the header fade out or move out of the way as visitors scroll down the page. You can also change its fill color and opacity to keep it visible, but not as distracting.
In this article, learn how to:
Adding and setting up a header scroll effect
Choose how you want the header to behave, depending on how noticeable it should be. You can make it freeze, for example, so it's always visible, or make it move out of the way so visitors can focus on the page's content.
Tip:
The scroll effect only applies to the page you're currently working on.
To apply a scroll effect to the header:
- Select the header.
- Click the Open Inspector icon
at the top right of the editor.
- Under Header settings, choose a Scroll effect and set it up:
Scroll with site
Freeze
Disappear
Fade out
Changing the header background color on scroll
Alongside the scroll effect you choose for the header, you can make it change colors when visitors scroll down. This brings even more attention to the header, ensuring visitors never miss it.
Tip:
This setting applies to every page where the header appears.
To change the header background color on scroll:
- Select the header.
- Click the Open Inspector icon at the top right of the editor.
- Under Design, enable the Color while scrolling toggle.
- Click the color box to choose a different color.
- (Optional) Drag the slider to change the opacity.
Removing a scroll effect
You can always remove a scroll effect that you previously added to the header.
To remove a scroll effect:
- Select the header.
- Click the Open Inspector icon at the top right of the editor.
- Choose what you want to disable:
- Scroll effect: Select the Scroll with site option from the drop-down.
- Color while scrolling: Disable the toggle to remove this effect.
Working with advanced header settings
When enabling advanced settings in the Inspector, you get more granular control of the header scroll effect. This view lets you adjust the position type (i.e. pinned, sticky) and the transition (e.g. move, fade) separately, creating your own effect instead of our presets.
To enable advanced settings:
- Select the header.
- Click the Open Inspector icon at the top right of the editor.
- Click the More Actions icon
next to Size. - Enable the Advanced Settings toggle.
- Adjust the header scroll effect under Header settings:
- Select a Position type (e.g. pinned, sticky).
- Add an Offset to create some distance between the header and the top of the page.
- Enable the Transition toggle to add the Move or Fade effect.
- Add a Color while scrolling (under Design).
Did this help?
|