Header Sticky

Header Sticky keeps important navigation visible while users scroll through a page. With Animation Addons, you can create a Header Sticky, control when it appears or disappears, and adjust its behavior using smooth GSAP animations.

Requirement 

• Elementor (Page Builder)
• Animations Addons (Our Plugin)

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start.

How To Activate Header Sticky

• Go to your WordPress Dashboard.
• Click on Animation Addons.
• Head to the Extension Tab.
• Under ScrollSmoother, toggle on Sticky Element. 

Note: If you do not enable the Sticky Element, the Headers Sticky option will not be available.

Step 1:  Create a Header Template

Under Animation Addons, click on Theme Builder ⟶ Add New Template. 

Then, in Template Settings, configure based on the below: 

Name: Choose a Header name according to your choice. In this example, Header is chosen. 

Type: It controls where the template can be applied and which conditions are available for it. You will find options like Header, Footer, Single Post, Archive, and Loop Builder.

 Select type ‘Header’. 

Display: It controls where the template is rendered on the site. In this example, ‘Entire Website’ is chosen. 

Smoother?: This option enables GSAP ScrollSmoother support for the template. However, leave the option by default. 

OffsetY9(px): Adds a vertical offset in pixels when the template is rendered or animated. Leave this option as it is.

Next, click “All Data Saved” and then select “Edit with Elementor.” 

Step 2:  Add Header Layout & Configure Sticky Settings

If you already have a header, you can use it. If not, you can import one from Animation Addons. 

To do this, click the Animation Addons icon, go to the Category section, select Header, and choose any header layout based on your preference.  

Once the header appears, click the Container section on the right side of your screen. If you don’t see the Container section, click Structure to enable it.

Then, click the Advanced tab on the left panel and select Header Sticky.

Header Sticky 

After enabling the Header Sticky, you will see two options: Content and Style. Start with the Content option.

Content 

End Trigger: It lets you control when the sticky behavior should stop.

Start Position: Sets when the sticky effect starts.

Z-index: Controls the stacking order of the header sticky. The default value is set to 9999. 

Up Scroll Sticky: Controls how the header behaves when scrolling upward. If enabled, the header reappears as you scroll up. If disabled, the header remains hidden or static until the top of the page is reached.

Ease: Sets the animation easing function for the sticky transition. In this example, power2.out is selected. However, you can choose any option based on your style needs.

Duration: Controls how long the sticky animation takes. Here, the duration is set to 0.08

Step 3: Control Header Sticky Behavior

Control when the header appears, disappears, or reappears on scroll while adjusting animation timing and visibility behavior.

Make a Header Sticky

To create a Header Sticky, simply disable the “Up Scroll Sticky” option. That’s it. To preview the result, go to the WordPress dashboard, open the Pages section, select any page, and click View. 

Final Output

Make a Header Disappear

To make the header disappear, go to the WordPress dashboard and open the page where you want to hide the header, such as the Home or About page. Then click “Edit with Elementor.”

Then select the section where you want to remove the header. After selecting it, click the Advanced tab on the left side of the screen. 

Next, set a class name in the CSS Classes field based on your preference, copy it, and click on Publish. 

In this example, the class name is set to header-vanished.

After copying, click “Publish.” Then return to the Header Sticky editor panel and paste the class name into the End Trigger field. 

Since the class name is set to header-vanished, .header-vanished is used here. Lastly, click Publish and preview the output.  

Final Output

Make a Header Visibility on Upward Scroll

To make the header visible while scrolling up, set the Start Position value to 500. Then enable the “Up Scroll Sticky” option so the header reappears as you scroll upward. 

Final Output 

Style 

CSS Custom Code

Now, in the Style options, assign a style class name based on your preference. In this example, the class name is set to .aae-custom-color-bg

Next, go to Custom CSS and paste the CSS code and click on Publish. Lastly, click on preview to see the result. 

Custom Code Final Output

No Custom Code Required

If you want to avoid the hassle of coding when changing heading colors, this option is also available in the Style settings.

To customize the background, you can modify the following settings:

Background Type

Under background type, you will find options like color and image. 

Color: Choose a color that matches your design style. You can either apply a custom color or select one directly from the color picker. In this example, Olive Green is used. 

Image: You can also set an image as the background. However, in this example, the option is left as default.

Padding

Padding controls the spacing inside the header sticky. In this example, the padding is set to 30, but you can adjust the value based on your design preference.

Border Type

Border Type controls the border style applied to the header sticky. It lets you add borders like:

• Solid
• Double
• Dotted
• Dashed
• Groove

However, in this example, the “None” option is selected.

Now, let’s take a look at the final result.

No Code Final Output