當滾動窗口，它是如何選擇的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(); 
     } 
    }); 

}); 

希望它能幫助。