Sky Addons for Elementor

⌘K
  2. Home
  4. Docs
  6. Sky Addons for Elementor
  8. Extensions
  10. Sticky

Sticky

How to use Sticky features of Sky Addons for WordPress

The Sky Addons Sticky extension pins any Elementor container or widget to the top or bottom of the screen as the page scrolls. Use it for a header that follows the reader, a sidebar call to action that stays in view, a mobile bottom bar, or a booking form that never scrolls away. It can stop at a chosen element instead of running to the bottom of the page, hide while scrolling down and slide back in on the way up, and it comes with its own set of style controls that apply only while the element is stuck — so a transparent header can gain a solid background the moment it pins. This documentation will guide you through enabling and configuring the Sticky extension on your website.

Key Features

  1. Works on containers and on any individual widget
  2. Sticks to the top or the bottom of the viewport, with an adjustable offset
  3. Stick Until — name an element and the sticky item is pushed back up when it reaches it
  4. Show on Scroll Up — the smart-header behaviour: hide going down, reappear going up
  5. Entrance animation each time the element becomes stuck
  6. A separate style state — background, padding, border, radius and shadow that apply only while stuck
  7. Per-device switches to turn it off on tablet or mobile
  8. No layout jump — the element’s original space is held open while it is pinned

Activate Sticky Module

Sticky ships with Sky Addons and is available once the module is switched on. To verify its status:

  1. Navigate to your WordPress Dashboard and locate “Sky Addons” in the left sidebar menu
  2. Open the “Widgets & Extensions” screen and switch to the Extensions list
  3. Find “Sticky” in the list
  4. Ensure the toggle switch is in the “On” position
  5. Save your changes if you made any adjustments

Using Sticky

  1. Open the Elementor Editor and select the container or widget you want to pin.
  2. For a container: the “Sticky” section appears in the Layout tab.
  3. For a widget: the “Sticky” section appears in the Advanced tab.
  4. Switch “Enable” on. A second “Sticky” section then appears in the Style tab for the stuck-state styling.
  5. Save and view the page on the front end — the extension runs there only, so that you can keep editing normally on the canvas.

Sticky Settings

  1. Enable – turns sticky behaviour on for this element.
  2. Stick To – Top or Bottom of the viewport. Top suits headers and toolbars; Bottom suits mobile action bars.
  3. Offset – the gap between the element and the edge of the screen while stuck, 0 to 300 pixels. Use it to clear an admin bar or a second fixed header.
  4. Stick Until – the ID of the element where it should let go, written without the hash (for example footer). When that element arrives, the sticky item is pushed up out of the way instead of overlapping it. Leave it empty to stick to the bottom of the page. Available in Top mode.
  5. Show on Scroll Up – hides the element while the reader scrolls down and slides it back in the moment they scroll up. This is the behaviour most modern site headers use.
  6. Entrance Animation – None, Slide In or Fade In, played each time the element becomes stuck.
  7. Z-Index – the stacking order while stuck, default 99. Raise it if the sticky element slips behind something else on the page.
  8. Disable on Tablet and Disable on Mobile – turn the behaviour off per device. Worth using for anything tall; a sticky header that eats a third of a phone screen costs more than it gives.

Style the Stuck State

The Style tab’s Sticky section only applies while the element is actually pinned, so the element can look one way in the flow of the page and another way when it is following the reader. This is how a transparent hero header gains a solid background on scroll.

  1. Background:
    A classic colour or a gradient behind the stuck element.
  2. Padding:
    Responsive padding while stuck — useful for shrinking a tall header down as it pins.
  3. Border:
    A border that only exists in the stuck state, commonly a single bottom line under a header.
  4. Border Radius:
    Responsive corner rounding while stuck.
  5. Box Shadow:
    A shadow that lifts the stuck element off the content passing beneath it.

These changes ease in rather than snapping, so the transition from flowing to stuck reads as one movement.

Save and Preview

  1. Click “Publish” or “Update” to save your changes.
  2. View the page on the front end and scroll the full length of it, including past the Stick Until element if you set one.

Best Practices

  1. Keep the stuck element short. Anything taller than about 80 pixels takes real reading space away for the whole scroll.
  2. Pair Show on Scroll Up with a header. It gives the reader the full screen while they read and returns the navigation the instant they want it.
  3. Set Stick Until on a sidebar. Without it a sticky sidebar rides down over the footer, which always looks like a mistake.
  4. Give the stuck state a background. A transparent element pinned over scrolling text is unreadable within a second of scrolling.
  5. Only one sticky element per edge. Two things pinned to the top will overlap; use the Offset control if you genuinely need both.

Troubleshooting

  1. Nothing sticks in the editor: that is intentional. Pinning an element on the canvas would make it impossible to edit, so the extension runs on the front end only. Preview the page to test it.
  2. The element hides behind other content: raise the Z-Index. The default of 99 clears most themes but not every popup or overlay.
  3. Stick Until has no effect: enter the target’s ID with no hash — footer, not #footer — and make sure that element really carries the ID, which you can set in its own Advanced tab.
  4. The element behaves strangely or refuses to pin: check whether an ancestor container has a transform, a scroll effect or its own overflow setting. A transformed parent traps a fixed child; move the sticky element up to a top-level container.
  5. It fights another sticky feature: do not enable Elementor Pro’s own sticky on the same element. Pick one owner for the behaviour.

Frequently Asked Questions

How do I make an Elementor header stick to the top on scroll?

Select the header container, open the Layout tab, find the Sticky section and switch Enable on with Stick To set to Top. Then open the Style tab’s Sticky section and give it a background and a shadow so it stays readable over the content passing underneath.

Can the sticky element stop before the footer?

Yes. Give the footer container an ID in its Advanced tab, then type that ID — without the hash — into Stick Until. When the footer reaches it, the sticky element is pushed up rather than overlapping it.

How do I build a header that hides on scroll down and returns on scroll up?

Turn on Show on Scroll Up. The element slides out of view while the reader moves down the page and slides back the moment they scroll up. Pair it with the Slide In entrance animation for a smoother return.

Does the page jump when the element sticks?

No. The extension leaves a placeholder of exactly the same size in the element’s original position, so the content around it never shifts.

Can I turn it off on phones?

Yes — Disable on Tablet and Disable on Mobile are separate switches in the same section. On a small screen a pinned element costs a large share of the viewport, so turning it off there is often the right call.

Related Documentation

Conclusion

The Sticky extension by Sky Addons for Elementor keeps navigation, offers and forms in reach without a line of code and without the layout jumping. Keep the pinned element small, give it a background, and tell it where to stop. If you have any questions while using Sticky, the Sky Addons support team is happy to help.

How can we help?