Reference guide for creating pinned elements that stick during scroll in DiviAnimator.
Requirements #
You need Divi Theme or Divi Builder, DiviAnimator, and the Sticky Elements Extension enabled. Requires Divi 5.
Overview #
Sticky Elements pins an element to the viewport during scroll, then unpins it at a specified trigger. The element stays fixed on screen until the trigger is reached, at which point it continues with normal scroll behavior.
Applies to: Row and Section elements. Add this extension to a Row or Section to enable pinning on that element.
Enabling the Extension #
- Go to DiviAnimator → Extensions in your WordPress admin
- Find Sticky Elements and toggle it on
- Click Save Settings
Once enabled, go to a Row or Section in your page builder. In the Row/Section settings, click the Advanced tab to find Sticky Elements settings. Settings below control when the element pins and unpins.
Settings location: Row/Section → Advanced tab → Sticky Element section
Pin Wrapper #
Selects which container element receives the pin behavior.
| Option | Behavior |
| Default | Uses the element's natural wrapper |
| Custom | Specifies a custom selector for the wrapper |
Use Default for most cases. Use Custom if the pinned element needs a specific parent container.
Start Position #
Defines where the element sits relative to the viewport when pinning starts. This is the position at which the element becomes sticky.
| Position | Meaning |
| Top Top | Element top aligns with viewport top |
| Top Center | Element top aligns with viewport center |
| Top Bottom | Element top aligns with viewport bottom |
| Center Top | Element center aligns with viewport top |
| Center Center | Element center aligns with viewport center |
| Center Bottom | Element center aligns with viewport bottom |
| Bottom Top | Element bottom aligns with viewport top |
| Bottom Center | Element bottom aligns with viewport center |
| Bottom Bottom | Element bottom aligns with viewport bottom |
| Custom | Use custom positioning values |
Most common: Top Top (element sticks to top of screen when scrolled into view).
End Trigger #
CSS class selector (must start with '.') that defines when the pin stops. The pinned element unpins when this trigger element reaches the position specified in the End setting.
Example: If End Trigger is '.section-end' and End is 'Bottom Bottom', the element unpins when the .section-end element reaches the bottom of the screen.
Required: This field must contain a valid CSS class selector.
End Position #
Defines where the trigger element is positioned when the pin stops. Uses the same position options as Start Position.
Example: If End is 'Bottom Bottom', the pin stops when the trigger element's bottom reaches the viewport bottom.
Pin Toggle #
| Option | Behavior |
| On | Element is pinned during scroll |
| Off | Element scrolls normally (no pinning) |
| Custom | Pinning controlled by custom condition |
Use On for standard pinning. Use Off to temporarily disable pinning without removing settings.
Pin Spacing #
Automatically adds spacing to prevent layout jumps when the element pins and unpins.
| Option | Behavior |
| True | Adds spacing, prevents layout shift (default) |
| False | No spacing, element may jump |
| Custom | Custom spacing value |
Important: Pin Spacing only works if the container uses display: flex. Use True to avoid visual jumps.
Pin Type #
Determines the CSS method used for pinning.
| Type | Method | Recommended |
| Fixed | Uses CSS position: fixed | Yes |
| Transform | Uses CSS transform property | Alternative |
Fixed is the standard choice and works in most cases. Transform is an alternative that may work better in some layering scenarios.
Debug Markers #
Shows visual guides on the page to help debug pinning behavior during development. Toggle on to display markers. Toggle off to hide them.
Debug markers show the pin boundaries and trigger points. Enable during setup to verify positioning is correct, then disable before publishing.
Configuration Examples #
Header Pin to Section End #
Pin a header at the top of the screen until a specific section ends.
| Setting | Value |
| Pin Wrapper | Default |
| Start | Top Top |
| End Trigger | .section-end |
| End | Bottom Bottom |
| Pin | On |
| Pin Spacing | True |
| Pin Type | Fixed |
Side Panel Pin #
Pin a side panel to screen center until trigger point.
| Setting | Value |
| Start | Center Center |
| End Trigger | .panel-end |
| End | Bottom Center |
| Pin Type | Transform |
Hero Section Pin #
Pin hero section at viewport bottom until next section appears.
| Setting | Value |
| Start | Bottom Bottom |
| End Trigger | .next-section |
| End | Top Bottom |
| Pin Spacing | True |
Troubleshooting #
Element not pinning #
Verify the extension is enabled on the Row/Section. Check that End Trigger contains a valid CSS class starting with '.'. Enable Debug Markers to see pin boundaries. Ensure the container element exists on the page.
Element unpins too early or too late #
Adjust the End Position setting. Enable Debug Markers to see when unpin happens. Verify the End Trigger class is applied to the correct element. Check if trigger element position is as expected.
Layout jumps when pinning/unpinning #
Enable Pin Spacing if not already on. If already enabled, ensure the container uses display: flex. Check for conflicting CSS rules that might interfere with spacing calculation.
Pin doesn't work with custom wrapper #
Verify Pin Wrapper is set to Custom. Ensure the custom selector correctly targets the desired wrapper element. Test the selector in browser console: document.querySelector('your-selector').
Fixed vs Transform not working properly #
If Fixed causes layering issues, try Transform. If Transform causes alignment issues, use Fixed. Test both options to find which works better with your layout.
Debug Markers not showing #
Verify Debug Markers toggle is on. Clear browser cache. Check if custom CSS is hiding the markers. Enable in browser inspector to confirm they're present in DOM.
Pin works on desktop but not mobile #
Pinning behavior is global. If it only affects desktop, check for device-specific CSS that might interfere. Test in multiple browsers and devices. Verify End Trigger element exists on mobile.
Pinned element disappears #
Check z-index—pinned element may be behind other content. Verify element is not set to display: none by CSS. Enable Debug Markers to confirm element is pinning but obscured.
Support #
For issues or questions, contact support@diviexpand.com or submit a ticket through your DiviAnimator account.
© 2026 DiviAnimator. All rights reserved.
