Scoll Smoother breaks Sticky Header

Hi there,

i have the problem that my sticky header. It was only working in the editor, but not on the front end. I figured out, that it was not working, while scroll smoother was on.
I know there is a hint about a data attribute so that fixed elements don’t get ignored.

I tried the automatic function, but it was not working. I gave the header section the data attribute “data-brf-fixed”, but I am not really sure how this works. I gave it the name “data-brf-fixed” and the value “data-brf-fixed”, I guess this was wrong. Maybe this works not with sticky.

Any help is appreciated.

Thanks a lot
Ingo :slight_smile:

Hi Ingo!

As you predicted, the GSAP Scroll Smoother changes the context of your fixed / sticky positioned elements. The toggle in the settings will correct fixed elements. For your sticky elements you need to find a custom solution without position: sticky. See also here:

For example, when talking about sticky headers, you could easily use GSAP Pin to sticky your header. Feel free to send me access to your site, I could create an example for this :slight_smile:

Hi Daniele,

thank you very much for the quick resonse and you offer. This is really nice. I would try it first by myselfe (to learn it), but if I get stuck, I would like to come back to you.
One question, do you know, If GSAP is from a performance piont of view more intense then the normal sticky property?
Thanks

Technically, position: sticky should be faster. But when we talk about the perspective of a visitor: No difference. :wink:

1 Like
3 Likes

I had this problem before, but forgot about this solution.

Went through, shut off all my plugins, found that Bricksforge was the issue.

Found this thread (AGAIN), switched to smooth scrolling to Lenis - great work Daniel adding that at the end of last year - and we’re sticky!

I’m half typing this so I won’t forget why my sticky header isn’t sticking next time!

1 Like