Smooth Scroller is affecting all other fixed position div's in a page

[Market South]

Hi there,

 

We are building a static site with Gatsby Home | Pilot Brands (pilot-brands-dev-git-master-nakedcreative.vercel.app) which is under development.

 

We are using Smooth Scroller library on all the pages of the website which is working great. The website also has a sticky navbar with "position: fixed".

 

The sticky bar will only be visible on scrolling from bottom to top of a page. Which was working as expected before using the library.

 

The issue is after starting to use the Smooth scroller library, the navbar is not showing on scrolling back to top. 

 

On doing some research, noted that it is to do something with the fixed navbar, but I am not sure how to overcome this. 

 

Can someone please direct me in the correct way please, as this is the first time I am using the Smooth Scroller library.

 

Thanks in advance.

[GreenSock]

If I understand your question correctly, it sounds like you just need to put your position: fixed element OUTSIDE of the smooth-wrapper element as indicated in the docs. This is because whenever you have a position: fixed element inside an element that has ANY transform on it (and ScrollSmoother works by applying transforms to the smooth-content), the browser uses that transformed element as the context rather than the viewport. That's totally a CSS/browser thing, not directly related to ScrollSmoother. 

[Market South]

Hi Jack, 

 

Thanks for the prompt answer, much appriciated.

Placing the fixed element outside of smooth-wrapper resolved the issue and everything is working as expected.