Creating a fixed element that shows up below the fold

Question

I'm trying to create an effect similar to this. The background is fixed, but changes after certain elements. I've spend a considerable amount of time on this and still have not found anything close to explaining how to do this.

Basically I was to learn how to mimic that exact effect. I want an image to be fixed, but show up below the fold. I'm sure the answer lays in jQuery, but I don't know where to start.

Answer 1

In very simple words you can make all the "openings" (areas where the different backgrounds show up from behind) as any other div but with

background-attachment:fixed

so if you have

[background]
[content]
[content]
[other background]
[content]
[content]
[yet another background]

it's basically

  <div style="background-attachment:fixed"></div>
  <div>Content</div>
  <div>Content</div>
  <div style="background-attachment:fixed"></div>
  <div>Content</div>
  <div>Content</div>
  <div style="background-attachment:fixed"></div>