help center

Search
Close this search box.
On this page

Implement sticky scrolling

Last Update: March 11, 2024

The Sticky Scrolling Effect lets you set a Container/Widget as sticky, so that it sticks to the top or bottom of the screen.

Create scrolling effect

  1. Login to WP Admin.
  2. Go to the container/widget where you want to implement sticky scrolling.
  3. Click the handle Implement sticky scrolling 1 to edit.
  4. Click Advance.
  5. Expand Motion Effects.
  6. Set Sticky. Following are the options:
    Implement sticky scrolling 2
    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? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!