title: Using JavaScript/JQuery to display text only on scroll event
body: <p>I am trying to create a page that contains hidden text that is only revealed when someone scrolls.</p>
  
  <p>As someone scrolls past a <code>div</code>, that text should disappear, while the new text is revealed.</p>
  
  <p>I only was able to find solutions for scroll vertically or horizontally, etc.</p>
  
  <p>I have created a <a href="http://jsfiddle.net/sandeepj/x8tzg/21/" rel="nofollow"><strong>simpler version</strong></a> of this using jsFiddle, but not matter what code I add to the JS part, nothing seems to work.</p>
  
  <p><strong>Here is the css:</strong></p>
  
  <pre><code>body {
      background-color: #f8f8f8;
      margin: 5px;
      font-family: arial, sans-serif;
  }
  
  div#mainText {
      width: 960px;
      margin: o auto;
      padding: 10px;
      background-color: #f8f8f8;
      font-size: 1em;
  }
  
  h1 {
      text-transform:uppercase;
      color: gray;
  }
  
  h2 {
      font-family:"Times New Roman", Times, serif;
      font-size:2.5em;
  }
  
  .partOne
  {
      color: gray;
      display:none;
  }
  
  .partTwo
  {
      color: gray;
      display:none;
  }
  
  .partThree
  {
      color: gray;
      display:none;
  }
  
  .kicker
  {
      color: gray;
      display:none;
  }
  </code></pre>
  
  <p><strong>Here is the HTML:</strong></p>
  
  <pre><code>&lt;h1 id="preHead"&gt;Catchy Title&lt;/h1&gt;
  &lt;h2 id="headline"&gt;Headline goes here&lt;/h2&gt;
  &lt;P&gt;&lt;/p&gt;
  &lt;p id="introBlurb"&gt;A very compelling blurb here. Praesent volutpat rhoncus purus,         ullamcorper dapibus ante pulvinar non. Maecenas fringilla justo nec justo blandit non rhoncus nunc elementum.&lt;/p&gt;
  
  &lt;div class="partOne"&gt;
      &lt;p&gt;Part one here. This appears on first scroll event.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="partTwo"&gt;
      &lt;p&gt;Part two here. This appears on second scroll event.&lt;/p&gt;
  &lt;/div&gt;   
  
  &lt;div class="kicker"&gt;
      &lt;p&gt;Kicker here. This appears on 3rd scroll event.&lt;/p&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>JavaScript/Jquery:</strong></p>
  
  <pre><code>$(window).scroll(function () { 
      $("kicker").css("display"); 
  });
  </code></pre>
  
  <p>Nothing's worked so far. Any help is greatly appreciated.</p>