jQueryを使用してスクロールの下に隠れているメッセージの数を表示する方法は？

Question

会話画面では、読み込みにはカウンターを表示し、メッセージはスクロールダウンする必要があります。合計で15のメッセージがあったとしますが、今ブラウザでは6しか表示されていないとします。 9つのメッセージが下に隠されているので、カウンターに9が表示されるはずです。しかし、上下にスクロールすると、それに応じて目に見えるメッセージと隠されたメッセージが変化します。

 function isScrolledIntoView(elem) { 
     var $elem = $(elem); 
     var $window = $(window); 

     var docViewTop = $window.scrollTop(); 
      var docViewBottom = docViewTop + $window.height(); 

      var elemTop = $elem.offset().top; 
      var elemBottom = elemTop + $elem.height(); 

     return ((elemBottom <= docViewBottom) && (elemTop >=  docViewTop)); 
     } 
      var message = $('#messages'); 
      $(window).scroll(function() { 
     if (isScrolledIntoView('#hiddenElem')) { 
     message.text("Visible"); 
     } else { 
     message.text("Invisible"); 
    } 
    }); 

チェックコードはthis JS Fiddleです。隠された要素や目に見える要素を表示するために書かれたJavaScriptコード。

Answer 1

各メッセージの位置をスクロールされた値と比較する必要があります。
ループスルーする必要があります。ここで

は、何かの作業です：場合

var messages=$(".msg"); 

$(window).scroll(function(){ 
    var counter=0; 
    for(i=0;i<messages.length;i++){ 
    if(messages.eq(i).offset().top < $(window).scrollTop()){ 
     counter++; 
    } 
    } 
    // Display result. 
    $("#messages").html(counter); 
}); 

Updated Fiddle