Scoll Smoother breaks Sticky Header

Bug Reports
1

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:

2

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:

3

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

4

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

1 Like
5
3 Likes
6

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
7

Hi Daniele.

I tried to create the header and make it as a template, set it to sticky scroll and hide in certain pixel position, and I turned on the smooth scroll using Lenis. In preview mode it worked well but when in front-end mode, the header somehow didn’t hide when the page is scrolled. is there any solution to this? ay advices will be appreciated :slight_smile:

8

Just tried on my site and the header hides just fine, both on just sticky and sticky on scroll :thinking: Do you have any other styles set that might cause a conflict?

If you inspect the header in the console, does it have the slide up attribute?
image

9

didn’t appear as well before, but tried to add manually from the attributes panel and somehow it works! Thanks for the advice, appreciate it :slight_smile: