Introducing the most comprehensive sticky system in any WordPress page builder

TheDivi Sticky Optionsare a new feature that allows you to fix any item at the top and/or bottom of the browser window as you scroll up or down the page. This allows you to create fixed headers, menus, buttons, and keep other important information visible when scroll, such as CTAs or floating subscription forms. But that's just the beginning of what Divi Sticky Options can do.

TheDivi Sticky Optionsoffer much more than just a fixed position. It is an advanced system that allows for a single interaction based on scrolling and custom adjustments of the sticky style. You choose when and where the items become sticky according to the direction of the visitor's scrolling and the position of the item on the page. In addition, you have full control over the sticky style of any element, allowing design transitions when they become sticky!

Examples of Sticky Options

There is a lot you can do with Divi's new sticky options. Before you go into detail, check out some of these incredible demonstrations created by our design team. Scroll up and down the full page to see the full effect!

Fix on the Top, Lower or Both

Using sticky options is easy. Just go toAdvanced > Scroll Effects > Sticky Positionand choose from the available options:

• Set at the top
  This will set the item at the top of the browser window when you scroll down. Once the top of the item touches the top of the window, it will be fixed there and remain visible as long as you move. This works great for fixed header menus, as shown below.

• Set at the bottom
  This will set the item at the bottom of the browser window when you scroll up. Once the bottom of the item touches the bottom of the window, it will be fixed there and will remain visible. This is ideal for floating subscription forms or calls to action.

• Fix on top and bottom
  This will fix the item at the top of the browser window by scrolling down beyond the item, and fix it at the bottom of the browser window by scrolling up beyond it.

You can also give the sticky elements a unique style, and this is where sticky options really shine. Once sticky options for an item are enabled, all design configurations get new style options in sticky state. This means that the elements can have two different styles: a standard style and a sticky style. Once the element becomes sticky, the design changes from its standard style to its sticky style.

For example, the video below has triggered sticky style editing for the background color of the menu. Then, an orange background color was assigned for the sticky style and a transparent background color for the standard style. When scroll down and sticky the menu, the background color changes to orange. This orange background color ensures that menu links remain readable when scrolling over different elements.

To enable the sticky style setting, click the new sticky icon on any design settings. Then you can adjust the standard style and sticky style independently. Once the element becomes sticky, it will assume its sticky style.
For example:

• You can change the background color of a header from transparent to solid.

• You can reduce the height of the menu in a sticky state so that it takes up less room when scrolling.

There is no limit to what you can do, because each design configuration can be adjusted to give the sticky elements completely unique styles.

Apply a Sticky Limit

You can also assign asticky limitto the sticky elements. Outside this limit, the elements will no longer remain fixed.
For example, in the video below, the main section has been assigned as a sticky limit for a floating side menu. That means that it will become sticky when the menu touches the top of the browser window, but it will no longer be fixed when you leave the main section. This sticky menu is only relevant to the elements within that section, so assigning a sticky limit makes sense.