Any ideas on doing scroll-based animations?

I was trying to create a header graphic that would animate out when the user scrolls down the page, but soon realized that because the scroll percentage is based on the iFrame and not the entire lesson page, the animation's not going to fire.

Wondering if anybody with better coding skills knows a way around this? Is it possible to target the root element instead of the iFrame?