title: Alternating DIV visibility on scroll
body: <p>I'm new here so don't slag me too hard. ;-)</p>
  
  <p>I have a series of DIVs that alternate with relative and fixed backgrounds and heavy use of z-index. As you scroll, DIVs pass over one another revealing new layers. It almost works perfectly - but I need a different strategy for later parts of the scroll.</p>
  
  <p>It's easiest to explain my problem by showing you. Here's a sample of what I'm trying to do:
  <a href="http://codepen.io/papercutpm/pen/KJBFd" rel="nofollow">http://codepen.io/papercutpm/pen/KJBFd</a></p>
  
  <p>"A", "B", "C" and "E" are working exactly as I want them to. Because I'm relying only on z-index though, "D" is borked. I only want it to appear with its DIV.</p>
  
  <p>I suspect I'm going to have to go the AJAX or jQuery route and somehow toggle visibility on and off based on a particular scrolling event. But that's like, advanced for me. LOL</p>
  
  <p>Any suggestions on how I can hide "D" until it's time to show, and then hide it appropriately again if the user scrolls backwards?</p>