Divi Sticky Options is a brand new feature that allows you to stick any element to the top and/or bottom of the browser viewport as you scroll up and down the page. This allows you to create sticky headers, menus, and buttons and to keep other important information in view as you scroll, such as calls to action or floating opt-in forms. But that’s really just scratching the surface of what Divi Sticky Options can do.

Divi Sticky Options offer so much more than just a simple fixed positioning. This is an advanced system that allows for unique scroll-based interaction and sticky-style adjustment. You choose when and where elements become sticky based on the direction that a visitor is scrolling and the element’s position on the page. You also have full control over the sticky style of any element, allowing for sticky design transitions!

There is so much you can do with Divi’s new sticky options. Before we get into the details, take a look at some of these amazing demos that our design team created. Scroll up and down the entire page to get the full effect!

​

Using sticky options is easy. Simply go to Advanced > Scroll Effects > Sticky Position and choose from the available sticky options:

This will stick the element to the top of the browser viewport as you scroll downward. Once the top of the element hits the top of the browser viewport, it will stick to the top and stay there as you scroll. This works great for sticky header menus, as shown below.

This will stick the element to the bottom of the browser viewport as you scroll upwards. Once the bottom of the element hits the bottom of the browser viewport, it will stick to the bottom and remain there as you scroll. This works great for floating opt-in forms or calls to action, as seen below.

This will stick the element to the top of the browser viewport as you scroll down past the element, and it will cause the element to stick to the bottom of the browser viewport as you scroll upwards past the element.

You can also give sticky elements unique styling, which is really where sticky options shine. Once sticky options are enabled for an element, all design settings obtain new sticky state styling options. This means that elements can have two different styles: a standard style, and a sticky style. Once the element becomes sticky, the design will transition from its standard style to its sticky style.

For example, in the video below I have enabled stick style editing for the menu background color option. Next, I assigned an orange background color for the sticky style and transparent background color for the standard style. When I scroll down and the menu becomes sticky, the background color transitions to orange. This orange background color ensures that the menu links remain readable as I scroll past a variety of different elements.

To enable sticky style adjustment, click the new sticky icon above any design setting. You can then adjust the standard style and sticky style independently. Once the element becomes sticky, it will assume its sticky style. For example, you could transition a sticky header’s background color from transparent to solid. You could reduce the height of the menu’s sticky state so that it shrinks and takes up less space as you scroll. There’s no limit to what you can do because every design setting can be adjusted to give sticky elements completely unique styles.

You can also give sticky elements a sticky boundary. Outside of the sticky boundary, the elements will no longer remain sticky. For example, in the video below I have assigned the parent section as the sticky boundary for this floating sidebar menu. That means it will become sticky as the menu hits the top of the browser viewport but will stop being sticky as I exit the parent section. This sticky menu is only relevant to the items within this section, so assigning a sticky boundary makes sense.