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.

Requirement 

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

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you 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 

• Select the element you want to apply Sticky Elements to, then click on the container to enable the wrapper. 
• Next, click on the ‘Advanced’ tab and look for the Sticky elements option.
• Click on ‘Sticky Elements’ and toggle the ‘Enable’ switch to ‘Yes’. 

Note: In the top-left corner of your screen, you’ll see the container option called ‘Structure’.

Enable Sticky Element 

The first thing you’ll see is the ‘Enable’ option. Turn this on if you want to see how your animation looks while you’re building your page.

If it’s set to “Yes,” the animation will play in the editor just like it does on your actual website. If it’s set to “Off,” the element won’t move in the editor, but it will still work on the live site.

In short, this setting lets you watch the animation as you design, so it’s easier to make changes.

Step 2:  Set the Pin Wrapper 

Customize how your element stays pinned during scroll by adjusting key settings like Pin Type, Scrub, Spacing, and more.

Pin Wrapper 

The Pin Wrapper controls how your element stays in place while scrolling. You can choose Default for a quick setup or Custom for full control over wrapper placement.

• Default: Automatically adds a wrapper around the pinned element to maintain layout and handle pinning behavior—no extra setup needed.
  
• Custom: Lets you select your own wrapper, giving you complete control over where and how the element is pinned during scroll.
  

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

End Trigger 

The End Trigger sets the point where the pinned element stops staying fixed and starts scrolling like normal. You can change it to any value, such as a custom class, but by default, it is set to ‘end_trigger,’ and it’s usually best to leave it that way. 

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 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 selected False, but you can choose whichever option you prefer. 

Pin Type 

The Pin Type has two options: Fixed and Transform.

• Fixed: The element stays visible and fixed in place while scrolling.
  
• Transform: The element appears pinned but moves smoothly using transform values as you scroll.

Here, ‘Transform’ is selected, but you can choose whichever option suits your preference.

Pin Scrub 

The Pin Scrub setting offers three options: True, False, and a Number.

• True: Links the animation timeline directly to the scroll progress for precise synchronization.
  
• False: Plays the animation independently of the scroll, without syncing to the scroll position.
  
• Number: Syncs animation to scroll with a smoothing delay equal to the number of seconds you specify.

For example, False is chosen here, but you can pick what works best for you. 

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.

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.

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.

End 

The End setting offers similar options to Start.

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

BreakPoint 

The Breakpoint setting offers three options:

• None: Disables the pinning effect on all screen sizes.
  
• Mobile Portrait: Enables the effect on screens up to 767px wide.
  
• Tablet Portrait: Enables it on screens between 768px and 1024px wide.

For example, ‘Mobile Portrait’ is selected, but you can pick the option that fits your needs.

Final Results  

You Did It  

You’ve successfully activated and set up the Sticky Elements extension! From turning on the wrapper to adjusting scroll behavior, pin type, spacing, and breakpoints, you now have full control over how your elements move during scroll.

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.