Editor X: Adding and Customizing Header Scroll Effects
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:
Sticky scroll effect Pinned scroll effect Adding transitions and a fill color on scroll Removing a scroll effectAdding a Sticky scroll effect to the headerSet 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 headerPin 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 scrollWhen 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: 
    
Click Position in the Inspector . 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 scrollMake the header move in a certain direction as visitors scroll down the page. When they scroll up, the header reappears and moves back in the opposite direction. To make the header move on scroll:
Click the Transition toggle to enable it.    Click Move. Select the relevant direction: Left, up, down or right.  Set the distance to decide how far the header should move on scroll. Set the delay and duration of the effect (in seconds). Click the drop-down menu under Ease to decide how the header eases in and out. Note: This transition automatically applies to all breakpoints.Tip: 
You can use various units of measure to set the distance. Switch to a different measurement by clicking the Percentage % icon.  Fluid units of measure (percentage, vh or vw) are relative to the height and width of the header, not the viewport.    Make the header fade outMake the header fade out as visitors scroll down the page. When they scroll up, the header reappears.  To make the header fade out on scroll:
Click the Transition toggle to enable it. Click Fade. Set the delay (in seconds).  Set the duration of the effect (in seconds). Note: This transition automatically applies to all breakpoints. Change the header's background colorMake the header's fill color change as visitors scroll down. When they scroll up, the header's color changes back to the original color. To make the header change colors on scroll:
Click the Fill Color toggle to enable it. Click the color picker to select a target header background color. Drag the slider to adjust the opacity of the new fill color. Note: You can customize your header's background color per breakpoint. Note:While you can set a target background color alongside a transition, it is not possible to combine Fade and Move in the same effect. Removing a scroll effectYou can always remove a scroll effect you've previously added to the header.To remove a scroll effect:
Select the header in your Editor. Click Position in the Inspector . Click the Position type drop-down menu and select Default.