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

Learn more about Sticky

Did this answer your question?