Sticky Header stopped working with SmoothScroller

[jimmerxx]

Hi

I've just installed/implemented ScrollSmoother on my site and i've noticed that now the sticky header doesn't work, any ideas on how I can solve this?

 

Website:

https://dev.vennershipley.co.uk/

 

[mvaneijgen]

Hi @jimmerxx welcome to the forum and thanks for being a Club Greensock member 🎉

 

Check out the following post

 

And from the docs https://greensock.com/docs/v3/Plugins/ScrollSmoother same goes for sticky elements. 

 

• position: fixed should be outside the wrapper - since the content has a CSS transformapplied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.

Hope it helps and happy tweening! 

 

[jimmerxx]

Hi @mvaneijgen

 

Thanks for the reply, I had originally moved the header above the 'smooth-content' div and it still didn't work, but thanks to your example I realised I was missing the 'smooth-wrapper' div 🤦‍♂️

 

Thanks again for the swift reply

 

J