ScrollTrigger with Nested Persistent Headers

[Michael Baumer]

Position sticky works for the main header, but not for the sub headers. Is it possible to keep the sub headers persistent while the section animations scrub?

See the Pen RwxyZKx by rmbaumer (@rmbaumer) on CodePen

[OSUblake]

Hi Michael,

 

I don't think that is possible because the sticky header isn't going to reach it's sticky point. You will probably have to rework your headers, maybe to be sticky outside of the section, kind of like this.

 

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

 

Or use ScrollTrigger to pin those headers with pinSpacing: false. And of course for that to work you will also need to have the headers outside of the section.