title: Show content on scroll
body: <p>I'm trying to get my post content to stay hidden until the user scrolls (<a href="http://static.tumblr.com/bw1wxme/TRAnfaf5y/screen_shot_2014-11-19_at_13.05.50.png" rel="nofollow">example</a>). So far I haven't been successful.</p>
  
  <p>So far I have this code - </p>
  
  <p>jQuery -</p>
  
  <pre><code>$('.content-post').hide();
  $('div').on('scroll', function(){
  if($(this).scrollTop() &gt; 25)$('.content-post').show();
  else $('.content-post').hide();
  });
  </code></pre>
  
  <p>CSS -</p>
  
  <pre><code>.content-post { 
  background-color: #EDE3DE;
  margin: 0 auto;
  text-align: left;
  }
  </code></pre>
  
  <p>HTML - </p>
  
  <pre><code>&lt;div class="content-post"&gt;  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/Lx091t2w/7/" rel="nofollow">JSfiddle</a> and my <a href="http://katiedev.com/hu2/uncategorized/fghsrgdfc/" rel="nofollow">website</a></p>
  
  <p>I am currently studying jQuery so please go easy :)</p>