Sticky Elements

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 outsite 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.

Hi there!

If you have any questions or would like to get in touch, please fill the form below and we’ll get back to you as soon as possible.

Did you know?

You can create popups and effects like this one with Toolbox! It's so easy!

Ahhh yes!

You officially know the power of the irresistible 3D Button :D

You can easily design Popups like this one using Toolbox and Divi Builder!

Did you know?

Do you like this landing page? Does it look pretty advanced? Well, guess what! We didn’t use even a tiny bit of custom CSS or JavaScript to build it. All the awesome effects have been created using the Divi Toolbox!

Pricing

Choose the plan to suit your needs