Divi Toolbox ➜ Global ➜ Sticky Elements
This feature adds ads an option to stick any element to the top of the page upon scroll. Once enabled, you can define addtional settings:
- Top Offset – the space between top of page and sticky element.
-
Mobile Breakpoint – Define the screen width, below which the elements won’t stick to the top.
There are two types of Sticky elements you can use:
1. Simple Sticky Elements – stick inside the container
To make any element sticky (preferably a column or a module), navigate to element’s Settings → Advanced tab → CSS ID & Classes → CSS Class and add a custom class of: dtb-sticky
Element with this CSS class will stick (stop scrolling) when it reaches the top of the page when you scroll down. It will un‑stick and move up once it reaches the bottom of the parent container. If used on a module, make sure that the “Equalize Column Heights” option is enabled in the parent Row settings.
Use Custom Selectors
Check this option to use custom CSS selectors for the simple sticky elements. Separate multiple selectors with commas. The enetered selector needs to be specified as in the CSS file, with a dot symbol if it’s a CSS class or with the # symbol if the target is element’s CSS ID. You can include multiple additional custom selectors (separate with commas).
2. Global Sticky Element – sticks outside the container, relative to page window
A single element can become sticky once it reaches the top of the page, and stay sticky even when you scroll past it’s parent container. This effect can be applied to only one element per page.
If you enable the option and assign a CSS Class or ID of the sticky element, make sure your selector is unique (there is only one element on the page with the selector you’re using). You can also assign a CSS Class or ID of the “push-up” element, which is located below the sticky element and will un-stick it upon scroll.
Global Sticky Element Selector
Assign a CSS Class or ID of the sticky element, make sure your selector is unique (there is only one element on the page with the selector you’re using). Use dot if it’s a classname or # symbol if it’s an ID (.sampleClass or #sampleID)
“Push-Up” Element Selector (optional)
You can assign a CSS Class or ID of the “push-up” element, which is located below the sticky element and will un-stick it upon scroll.
