NO BUG: Position: sticky Header broken

Bugs
1

Bricks Version: 1.6.1
Browser: Firefox, Chrome, Edge
OS: Windows 10
URL: Home - Test

Hi all, below is an image sharing my issue. I have a Header Template with ‘Sticky Header’, ‘Sticky Scroll’, & ‘Scrolling BG’ set. The sticky works while in editor, but when viewing on live site the position: sticky is broken.

Note: ‘Scrolling BG’ color continues to work on live site. But not the position: sticky. A different .sticky css is attached to a Div that works in editor but broken on live site too.

I read that parent elements with certain overflow properties can break the sticky. Attempted to edit ancestors overflow in firefox dev console to no avail. Any clues to what may be causing this? Thank you!

broken_sticky_header_01
broken_sticky_header_011920×2745 289 KB

2

scrollsmoother doesn’t support fixed/sticky elements, it’s not related to bricks (the same would happen if using scrollsmoother script outside of Bricks)

mentioned in scrollsmoother’s documentation (the first paragraph in the ‘Caveats’ section)

3

Tested same position:sticky class in a different wordpress site using only Oxygen, works great.

Even basic css { background-color: blue; } is broken on frontend view using Bricks… hmm (there are a few other plugins running, Plaster, ACSS, Frames. Perhaps one of those may be breaking it)

**Edit: CSS color not showing on Front End due to caching issues. Cleared cache and resolved color issue

4

Is there a work around to disable smoothscroll? I found this old thread in which others are running into the issue too

**Edit: How come in this video, the user runs into zero trouble with the sticky header if smoothscrolling is active on default. Hmm…

5

SOLVED! @wplit was right about smoothscroll! Turned out Bricksforge Smoothscroller was breaking the Sticky Element. Went into Bricksforge Extensions tab and Disabled ‘Scroll Smoother’, now sticky items work :smiley:

Shoutout to @Sridhar for resolving the issue!

6

Because the GSAP Scroll Smoother does not support fixed / sticky positioned elements inside the scroll container, we’ve added Lenis as additional provider. Just change the provider on the Scroll Smoothing settings to „Lenis“ and you have a smooth scrolling site with working sticky elements :ok_hand: