GSAP Extensions Sticky Header Estimated reading: 5 minutes 54 views Sticky Headers keep important navigation visible while users scroll through a page. With Animation Addons, you can create a sticky header, 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 Sticker Header 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 Sticky Header 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. Sticky Header After enabling the Sticky Header, 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 sticky header. 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 Sticky Header Behavior Control when the header appears, disappears, or reappears on scroll while adjusting animation timing and visibility behavior. Make a Sticky Header To create a Sticky Header, 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 Sticky Header 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 Now, in the Style options, assign a style class name based on your preference. In this example, the class name is set to .header-primary. Next, go to Custom CSS and paste the CSS code and click on Publish. Lastly, click on preview to see the result. Final Output You Did It You’ve successfully created and customized a Sticky Header using Animation Addons. Your header now responds smoothly to scrolling. It supports visibility control on both upward and downward scroll. It can also be styled to match your site’s design, delivering a more engaging and professional navigation experience.
