document window height - FACESOHO知行者

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document window height</title>
<link rel="shortcut icon" href="/public/images/favicon.ico" mce_href="/public/images/favicon.ico" type="image/x-icon" >
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" media="all" />	
<link rel="stylesheet" href="/public/css/style.css?v=1.147" type="text/css" media="all" />	

<script src="//cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>


<link rel="apple-touch-icon" href="/public/images/mobile-icon.png"/>
<meta name="apple-mobile-web-app-title" content="知易行难">
</head>
<body>
<span id="monitor" style="top:100px;right:100px;position:fixed;z-index:10000;color:red"></span>
<script>
var str='',doc_height=$(document).height(),win_height=$(window).height();
$(window).scroll(function(){
  doc_height=$(document).height(),win_height=$(window).height();
  str       = $(document).scrollTop() + ">=" +(doc_height- win_height) + "=" + doc_height + "-" + win_height;
  $("#monitor").text(str);  
});
</script>
<pre>
jQuery(window).height()代表了当前可见区域的大小
而jQuery(document).height()代表了整个文档的高度

当浏览器窗口大小改变时(如最大化或拉大窗口后)
jQuery(window).height() 随之改变
但是jQuery(document).height()是不变的 
$(document).scrollTop() 获取垂直滚动的距离
即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离
要获取顶端 到scrollTop()==0 时 就是顶端
要获取底端
只要 scrollTop()>=$(document).height()-$(window).height()
就 已经滚动到底端了
$(document).height()  //是获取整个页面的高度
$(window).height()
//是获取当前 浏览器所能看到的页面的 高度
这个大小在 缩放浏览器窗口大小时 会改变

与document 不一样 
$(document).height() 是整个body对象的高度
如果文档的高度没有到达窗口

$(window).height()是窗口的高度
$(window).scrollTop()是窗口滚动的高度
做个实验
var str='',doc_height=$(document).height(),win_height=$(window).height();
$(document).scroll(function(){
  doc_height=$(document).height(),win_height=$(window).height();
  str       = $(document).scrollTop() + ">=" +(doc_height- win_height) + "=" + doc_height + "-" + win_height;
  $("#monitor").text(str);
})
</pre>
</body>
</html>