Sticky Scrolling Effect

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


Watch a video of a cool example of a sticky scrolling effect.

Scrolling Effect

  1. Edit the Section/Widget by clicking its handle section settings
  2. Click the Advanced tab in the panel 
  3. Open the Motion Effects section
  4. Sticky: Choose to set your section to “stick” to the Top or Bottom of the screen, when scrolling
  5. Sticky On: Select on which devices your section will be sticky, Desktop, Tablet, or Mobile
  6. Offset: Pushes the sticky element up or down by pixels
  7. Effects Offset: The number of pixels the user must scroll before the sticky effect begins

NoteEffects Offset affects only if CSS was added to the sticky element. Here is an example of a typical set of CSS Rules that could be applied:

selector.elementor-sticky--effects {background-color: rgba(133,130,255,0.5)!important;}
selector {transition: background-color 4s ease !important;}
selector.elementor-sticky--effects >.elementor-container {min-height: 80px;}
selector > .elementor-container {transition: min-height 1s ease !important;}

Learn more about Sticky

Table of Contents