Create Sticky Headers, Dynamic Floating Elements And More!

Sticky Option Examples

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!

View Demo #1

View Demo #2

View Demo #3

Stick To Top, Bottom Or Both

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

Stick To Top

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.

Stick To Bottom

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 optin forms or calls to action, as seen below.

Stick To Top And Bottom

This will stick the element to the top of the browser viewport as you scroll downward 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.

Sticky Style Adjustment & Transition

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 a transparent background color for the standard style. When I scroll downward and the menu becomes sticky, the background color transitions to orange. This orange background color ensure 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 standar 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.

Applying A Sticky Boundary

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.

View The Demo

Sticky Option Are Available Today

The new Divi Sticky Options open up so many new possibilities for Divi websites. Not only does it allow you to easily create a wide array of sticky headers and menus, but sticky elements can also be combined in creative ways to make some really interesting new designs. Divi Sticky Options are available today, so download Divi and take them for a spin. Let us know what you think in the comments and don’t forget to check back next week for even more great Divi features coming your way.