Can I detect the user viewable area on the browser?

Question

As you can see the image below, there is \"A\", \"B\", \"C\", \"D\" and \"E\" on the website, and the user may only can see the A, B, and a little parts of D in their browse

Answer 1

You can get window's visible area by,

var pwidth = $(window).width();
var pheight = $(window).height();

Then get document scroll,

$(document).scroll(function(e) {
       var top = $(this).scrollTop();       
       $("h1").html("total visible area is from:"+ top +" to "+ (pheight + top) +"px");
    });

Full example is here : http://jsfiddle.net/parag1111/kSaNp/