jquery - How to select div when scroll window to it -

i have page several posts div, these posts numbered according id

<div id=post-id>   

i tried building reading bar increased when hover div post
like this

my problem how select div scroll window instead of hover

check out.

here's jsfiddle link

$(document).ready(function() {      function bar(e) {         var num = $(e).data('id');         = $("#content .post").length, $("#navigation  .p").text("post:" + num);         $(".processreading").width(math.ceil(num / * 100) + "%");     }      $('#navigation .p').hide();     $('div.post').hover(function() {         $(this).css("background", "#ddd");         bar(this);     }, function() {         $(this).css("background", "#fff");     });      var page1offsettop = $('#post-1').offset().top - 40;     var page2offsettop = $('#post-2').offset().top - 40;     var page3offsettop = $('#post-3').offset().top - 40;     var page4offsettop = $('#post-4').offset().top - 40;     var page5offsettop = $('#post-5').offset().top - 40;     var page6offsettop = $('#post-6').offset().top - 40;      $(window).scroll(function() {         var y = $(this).scrolltop();          if (y >= page6offsettop) {             $('#post-1').css("background", "#fff");             $('#post-2').css("background", "#fff");             $('#post-3').css("background", "#fff");             $('#post-4').css("background", "#fff");             $('#post-5').css("background", "#fff");             $('#post-6').css("background", "#ddd");             bar($('#post-6'));         } else if (y >= page5offsettop) {             $('#post-1').css("background", "#fff");             $('#post-2').css("background", "#fff");             $('#post-3').css("background", "#fff");             $('#post-4').css("background", "#fff");             $('#post-5').css("background", "#ddd");             $('#post-6').css("background", "#fff");             bar($('#post-5'));         } else if (y >= page4offsettop) {             $('#post-1').css("background", "#fff");             $('#post-2').css("background", "#fff");             $('#post-3').css("background", "#fff");             $('#post-4').css("background", "#ddd");             $('#post-5').css("background", "#fff");             $('#post-6').css("background", "#fff");             bar($('#post-4'));         } else if (y >= page3offsettop) {             $('#post-1').css("background", "#fff");             $('#post-2').css("background", "#fff");             $('#post-3').css("background", "#ddd");             $('#post-4').css("background", "#fff");             $('#post-5').css("background", "#fff");             $('#post-6').css("background", "#fff");             bar($('#post-3'));         } else if (y >= page2offsettop) {             $('#post-1').css("background", "#fff");             $('#post-2').css("background", "#ddd");             $('#post-3').css("background", "#fff");             $('#post-4').css("background", "#fff");             $('#post-5').css("background", "#fff");             $('#post-6').css("background", "#fff");             bar($('#post-2'));         } else if (y >= page1offsettop) {             $('#post-1').css("background", "#ddd");             $('#post-2').css("background", "#fff");             $('#post-3').css("background", "#fff");             $('#post-4').css("background", "#fff");             $('#post-5').css("background", "#fff");             $('#post-6').css("background", "#fff");             bar($('#post-1'));         }          if (y > 50) {             var num = $('div.post').data('id');             $('.bar-container').show();             $('#main').hide();             $('#navigation .p').show();         } else {             $('.bar-container').hide();             $("#main").show();             $('#navigation  .p').hide();         }     });  }); 

hope helps.