jquery - Show content on scroll -

i'm trying post content stay hidden until user scrolls (example). far haven't been successful.

so far have code -

jquery -

$('.content-post').hide(); $('div').on('scroll', function(){ if($(this).scrolltop() > 25)$('.content-post').show(); else $('.content-post').hide(); }); 

css -

.content-post {  background-color: #ede3de; margin: 0 auto; text-align: left; } 

html -

<div class="content-post">   lorem ipsum dolor sit amet, consectetur adipiscing elit.  </div> 

here jsfiddle , website

i studying jquery please go easy :)

css

body{     height:2000px; } 

if box parent more big child, works on-scroll!

$('.content-post').hide();  //$(document).scroll(function(){ //$(document).on('scroll', function(){ $(document).bind('scroll', function(){   if ($(this).scrolltop() > 25) {      console.log($(this).scrolltop());      $('.content-post').show();   } else {      $('.content-post').hide();   } });