Solved Sticky Header styling options applied without scrolling

Hey Stefanie, I think you're pretty much spot on. When a section becomes sticky it is conceptually removed from the page and layered above it. Your top header would be sticky right away (being at the top of the page) and so would be removed from the page. This means that the first thing in the page would be the second section. And since it's now at the top of the page, it would behave as if the scrolling had already happened and it too would immediately become sticky.

If it works for you, putting them both in the same section would be the simplest solution. For more complex situations, I think you could probably use the "Sticky Top Offset" and "Offset From Surrounding Sticky Elements" (as shown in one of your screenshots) to change what point in the scroll they become sticky and where they are placed once they are sticky.

By the way, if you still have that Divi.Help thread relating to Divi Booster, would you mind sharing it here - I'd love to take a look. Divi Booster has a couple of features for adding sticky widget areas (which behave a bit like sticky sections), so perhaps it relates to those..

 

Hey Stefanie,

First, thanks for the forum link. I'll take a look at that shortly and see if it's something I need to address or not. Much appreciated.

You're right. My explanation doesn't quite cut it. I've set up a test on my site and think I can now see what's actually going on.

With the default Divi settings, when the first two sections in the page are both sticky, they are actually displayed right at the point where they should become sticky. So in theory, both sections should be marked as sticky right from the get-go.

However, I think Divi is doing some tweaking of this behavior. In particular, since many people would expect a fixed header section to start in the non-fixed state, it makes sense that the first section starts of as non-sticky and only turns sticky when the page scrolls. On the other hand, if the page loaded somewhere further down the page (on a page refresh, say), then it would make sense that any sections currently at the point where they should be sticky be immediately displayed as such. For example, a sticky social media bar that becomes sticky half-way down the page should immediately display as sticky if the page is reloaded while the bottom of the page is in view (rather than waiting for the user to scroll).

This seems to be what Divi is doing, immediately marking any section (other than the first) as sticky if it is in the correct position. The problem comes with the likes of your second section. There's no reliable way for Divi to tell if such sections are meant as an extension of the header, or as a piece of sticky content. It looks like Divi has decided to treat them as sticky content and display them as sticky initially.

So in your two header case, the first is treated like a header and marked as non-sticky, while the second is treated as a bit of sticky content and marked as sticky.

When you switched to a single section, now the whole unit is treated as a sticky header and displayed as non-sticky initially, changing to sticky on scroll.

There is a solution to make the second section start non-sticky initially, but become sticky as soon as the page scrolls. Simply set:

Section Settings > Advanced > Scroll Effects > Sticky Top Offset = -1px

The -1px means that you need to scroll at least one px down the page before the sticky effect is activated. Then it behaves the same as the top section.

Sorry, that was a bit long... hope it provides a better explanation!
Dan

 

I just wrote this up with some screenshot for future reference:

https://divibooster.com/resolving-sticky-state-issues-with-multiple-sticky-headers-in-divi/

 

You're welcome, Stefanie. Yeah, now that we understand it, it's easily worked around