scroll footer over the top of main content

[joris-rotteveel 16 Likes (Newbie)]

Hi everyone,

 

I am trying to do something very basic, but I can't get my head around it. I have a `content` div and a `footer` div. Once the `content` div's bottom reaches the center of the screen, I'd like to pin it and have the footer scroll over the top of the content. 

My pen shows weird spacing between the footer and the content, and ideally it should stop scrolling when the bottom of the footer hits the bottom of the viewport. With my attempt, the footer keeps scrolling causing a white gap at the bottom.

 

I've had a look at 

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

 but that only works with 100vh sections. 

Any help is appreciated!

 

Thanks

 

 

See the Pen wvqWQox by joris-rotteveel (@joris-rotteveel) on CodePen

[joris-rotteveel 16 Likes (Newbie)]

I have created another pen that does what I want. Unfortunately there are a few glitches on the codepen, prob some CSS reset issue, they are not happening on my local.

 

Feedback is still welcome!

 

See the Pen XWaKyQN by joris-rotteveel (@joris-rotteveel) on CodePen

 

 

[OSUblake 18,335 Likes (Superhero)]

Hi joris,

 

Did you try it with setting pinSpacing to false?

 

ScrollTrigger.create({
  trigger: "#main-article",
  pin: true,
  pinSpacing: false,
  start: "bottom bottom",
  markers: true
});

 

 

[joris-rotteveel 16 Likes (Newbie)]

Thanks for that video, super helpful and that creates a simpler solution than the onUpdate approach!