Problem with position fixed with ScrollSmoother

[mariiamaliuk]

I would like position-fixed elemennt to be always pinned on the bottom of the page and always to be over the text, in what way is it better to do? Thank you in advance. 

See the Pen abKBxYe by mariiamaliuk (@mariiamaliuk) on CodePen

[Rodrigo]

Hi @mariiamaliuk and welcome to the GreenSock forums!

 

There are a couple of issues in your ScrollSmoother setup. You are instantiating a ScrollTrigger instance and not a ScrollSmoother one:

// This creates a ScrollTrigger instance
const smoother = ScrollTrigger.create({
  trigger: ".position-fixed",
  start: "bottom bottom",
  end: "bottom bottom",
  pin: true,
  markers: true
});

Also don't add anything with position fixed inside the Smooth Wrapper and Content elements, everything with position fixed should go outside as stated in the documentation:

https://greensock.com/docs/v3/Plugins/ScrollSmoother

 

I forked your codepen example and added a couple of sections at the start and end  in order to create vertical scrolling so you can see it in action. I tinkered a bit with your HTML and CSS as well:

See the Pen MWXbdaM by GreenSock (@GreenSock) on CodePen

 

Hopefully this provides a good starting point as you go through the docs and examples there as well.

 

Happy Tweening!