当滚动窗口，它是如何选择的div

Question

我有几个职位的div的页面时，这些帖子按照像

<div id=post-id> 

我试图建立阅读栏，增加当悬停div的后
的ID编号like this

我的问题是如何选择通过滚动窗口div来代替它悬停

Answer 1

检查了这一点。

这里的JsFiddle link

$(document).ready(function() { 

    function bar(e) { 
     var num = $(e).data('id'); 
     a = $("#content .post").length, $("#navigation .p").text("Post:" + num); 
     $(".processreading").width(Math.ceil(num/a * 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(); 
     } 
    }); 

}); 

希望它能帮助。