How to show count for messages which are hidden below the scroll using jQuery?

Question

I need to show counter for loaded but scroll down messages in conversation screen. Suppose there are 15 messages in total but showing only 6 on browser right now. It means 9 messages are hidden in below so counter should display 9. But when I scroll up or down counter should change the value accordingly visible and hidden messages.

        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");
    }
  });

Check code in this JS Fiddle. Also JavaScript code written for show hidden or visible element.

Answer 1

You have to compare the position of each messages with the scrolled value.
So you need to loop throught them.

Here is something working:

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