Help Center Build with the Editor Widgets Implement sticky scrolling

Implement sticky scrolling

Last Update: August 3, 2026

The Sticky Scrolling Effect lets you set an element, container, or widget as sticky, so that it sticks to the top or bottom of the screen as visitors scroll.

Note: Instructions vary depending on whether you are using Elementor v4 (Atomic Editor) or Elementor v3 (Classic Widgets & Containers).

Elementor v4 (Atomic Editor)

  1. Open a page in the Elementor Editor and select the element you want to make sticky.
  2. In the left panel, click the Style tab and expand the Position section.
    style position v4
  3. Set the Position dropdown menu to Sticky.
    v4 sticky
  4. Set the following options:
  • Top / Bottom: Enter an offset value (e.g., 24PX or 1.5REM) to adjust where the element locks relative to the top or bottom of the screen.
  • Z-index: Increase this value (e.g., 10 or 999) if you need the sticky element to float above other overlapping content on the page.
  • Anchor offset: Define custom pixel distances for anchor link targets if needed.

Elementor v3 (Classic Widgets & Containers)

Create Scrolling Effect

  1. Open a page in the Elementor Editor.
  2. Go to the container/widget where you want to implement sticky scrolling.
  3. Click the handle to edit the element.
    Highlight of a container handle
  4. In the panel, click the Advanced tab.
    Container options with the Advanced tab highlighted
  5. Expand Motion Effects.
    The Motion Effects section
  6. Use the Sticky dropdown menu to select an option. Following are the options:
    The sticky dropdown menu
    1. None – This removes the sticky header. Do not choose if you want to create a sticky header.
    2. Top – Choose to stick your header to the top of the screen.
    3. Bottom – Choose to stick your header to the bottom of the screen.
  7. In Sticky On, choose the devices your section should be sticky. Following are the options: 
    Implement sticky scrolling 3
    1. Desktop – Sticky on desktop/laptops.
    2. Tablet Portrait – Sticky on tablets.
    3. Mobile Portrait – Sticky on mobiles.
  8. Set the following: (Displays only if Sticky is set to Top or Bottom)
    1. Offset – It pushes the sticky element up or down by pixels.
    2. Effects Offset – This is the number of pixels the user must scroll before the sticky effect begins.
    3. Stay in Column – Toggle to Yes if you want the section to remain in its own column. For details, see Sticky Inner Section Improvements
  9. Click Publish.
Note
Effects Offset affects only if CSS was added to the sticky element. For details, see How To Create A Sticky Transparent Header Effect.

Have more questions?

Can’t find the answers you’re looking for? We’re more than happy to assist.

Contact support

Related Articles

On this page

Share this article