How do I stop an iframe from scrolling until it's entirely on the page? (pictures inside)

I've been inspired recently by the photo blog Up On A Hill, which uses its photographs to create frames that only move once you've scrolled past all the text on a post. I want to do something similar, but with framed HTML pages that slide past instead of photographs. And rather than simply scrolling past each page, I'd like the new ones to come up like cards sliding over the old content – that is, the old page stays in place as the new stuff slides over the top.

The problem is, HTML pages are more finicky than photographs, and also, I'm extremely amateur at using JavaScript.

I made a CSS-only mock-up. You have a single frame that looks like a web site, but when you get to the bottom, the next frame slides up:

i.stack.imgur.com/33JMO.png

And that would be hunky-dory, except for two things. First off, the frame sliding up is an active page, which means if your mouse is hovering over it as you scroll, the content within that frame scrolls too, instead of continuing to move the new "card" up the page. So you wind up with a mess like this, where the bottom article's scrolled to th开发者_如何学Goe end but it only takes up a thin sliver of page space:

i.stack.imgur.com/9KSd4.png

There's also a problem in that this layout only works because one frame is fixed on a page, whereas the other one is absolute. But that seems like a less challenging problem than that of ensuring a card's entirely on the page before scrolling it.

How would I go about preventing an iframe from scrolling until it was on top? I imagine the solution involves somehow hiding the overflow, but I'm not certain how I'd detect the iframe's position on the page, or how I'd shift its scrollability once it was in position.

Up On A Hill doesn't use iframes to achieve their effect and they dont actually prevent scrolling from occurring. In fact, the way they accomplish their effect is to move all of the images down the page in sync with the scroll bar, temporarily disabling this effect during certain intervals. This gives the illusion that scrolling was disabled.

There is no way you're going to be able to do this with just CSS. My advice is

• Dont use iframes (they can make things complicated as you already found).
• Look at Up On A Hill's HTML and JS to see how they accomplished what they were trying to do. Don't steal steal it though! If you ask, maybe they will give you permission to use it.
• Use jQuery.
  • Take a few tutorials.
  • Read up on .scrollTop and .position (maybe .offset too) as these will be what you use to calculate and set their CSS positions on the page.