Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
joris-rotteveel

scroll footer over the top of main content

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

  • Solution

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
});

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×