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.

Scrolling Effect

1. Edit the Section/Widget by clicking its handle
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

Note: Effects 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