Sticky Elements

Sticky  Elements lets you keep a specific element fixed in place while scrolling, helping you create focused and interactive sections on your website. It’s a useful feature for things like sticky content, scroll animations, or highlighting key areas as visitors move through the page. 

It adds more control to your layouts and makes your designs feel more dynamic and engaging.

Watch the Video Tutorial

If you prefer watching a step-by-step guide, check out our video tutorial below, where we demonstrate how to use the Sticky Elements extension.

Requirement 

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

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

How To Activate Sticky Elements 

1. Go to your WordPress Dashboard. 
2. Click on Animation Addons. 
3. Head to the Extension tab. 
4. Under Scroll Smoother, toggle on Sticky Elements.  
5. Sticky Element is now enabled. You’ll find the option available in the page builder. 

Step 1: Choose Your Target Element & Enable the Wrapper 

• Click Structure, then navigate to the main container of the element where you want to apply the sticky animation. After that, enter the desired class name in the CSS Classes field.  

In this example, the class name is set to sticky-section. However, you can use any class name you prefer.

Note: You have to paste this class name in the End Trigger Custom field.

• Next, click the Container → Advanced tab and look for the Sticky Elements option.
• Click on ‘Sticky Elements’ and toggle the ‘Enable’ switch to ‘Yes’ to begin configuring the Sticky Element for this container.

Step 2: Configure Pin and Trigger Settings

Configure how the sticky element behaves during scrolling by setting the Pin Trigger, End Trigger, and Pin options.

Pin Trigger 

Controls which element determines when the sticky behavior starts and ends. You will find two options included 

Default: The sticky behavior starts and ends automatically based on the container’s position and viewport scroll. 

Custom: Allows you to manually set the trigger element that controls when the sticky behavior starts or ends.

For example, ‘Default’ is selected here, but you can choose any option that suits your needs. eds.

End Trigger 

Default: Uses the container’s natural scroll boundary to stop the sticky behavior automatically.

Custom: Allows you to specify a custom element that determines where the sticky behavior should end. You need to enter the CSS class name of the target element that will act as the end trigger.

In this example, Custom is selected. 

Note: Since we used the CSS class sticky-section, we need to enter sticky-section in the Custom field.

Pin 

The Pin setting offers three options: True, False, and Custom.

• True: Keeps the element fixed in the viewport while the page scrolls.
  
• False: Allows the element to scroll normally with the page.
  
• Custom: Defines specific scroll behavior, such as custom start/end positions, durations, or advanced triggers.
  

For example, ‘True’ is selected here, but you can choose the option that fits your preference.

Pin Step 3: Set the Pin Trigger Points  

Choose where the pinning starts and ends by aligning your element with the viewport, such as when its top hits the viewport’s top. You can also set a custom position.

Use Breakpoint to decide which devices the pinning works on, ensuring your animation fits all screen sizes.

Pin Start

The Start setting offers options like:
Top Top, Top Center, Top Bottom, Center Top, Center Center, Center Bottom, Bottom Top, Bottom Center, Bottom Bottom, and Custom.

Each option matches a part of the element (Top, Center, Bottom) with a part of the screen (Top, Center, Bottom) or uses a custom position.

For example, ‘Top Top’ is selected, so pinning starts when the top of the element reaches the top of the viewport.r.

Pin End 

The Pin End setting offers similar options to Pin Start.

For example, ‘Bottom Top’ is selected, which means the pin stops when the element’s bottom reaches the top of the viewport.

Pin Spacing 

The Pin Spacing setting offers three options: True, False, and Custom.

• True: Adds spacing below the pinned element equal to its height.
  
• False: No space will be added for the pinned element.
  
• Custom: Manually define how much space should be added where the element originally was.

For example, here, select False, but you can choose whichever option you prefer. 

Pin Markers 

Pin Markers has two options: True and False.

• True: Displays colored markers on the page to indicate the start and end of pinned elements visually.
  
• False: Hides the markers from view.

For example, False is chosen, but feel free to explore and select what works best for you.e and select what works best for you.

Final Results  

You Did It  

You’ve successfully activated and set up the Sticky Elements extension! Whether you’re making storytelling sections, sticky headers, or interactive visuals, Sticky Elements helps you build scroll-based effects that improve your website’s design. 

Additionally,  if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.