Skip to main content

the Sticky scrolling effect allows you to set a section / widget as sticky, so that it sticks to the top or bottom of the screen.


Scroll effect

  1. Edit the section / widget by clicking on its handle
  2. Click on the Advanced tab on 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: Select on which devices your fixed section, desktop, tablet or mobile will be kept
  6. Make up for: Push the sticky element up or down in pixels
  7. Effects edit Make up for: The number of pixels the user must scroll before the sticky effect starts

Note: Effects compensation affects only if CSS was added to the fixed 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;}

More about Sticky