计算高度的常用值

$(window).scrollTop();   　　 滚动条距顶部距离(页面超出窗口的高度)

$(document).scrollTop();   　　滚动条到顶部的垂直高度

$(document).height()             页面的文档高度

$(window).height()              窗口的高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高度</title>
<script src="https://files.cnblogs.com/tinyphp/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">
$(function(){
    $(window).scroll(function(){
    console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
    console.log("页面的文档高度 ："+$(document).height());
    console.log('窗口的高度：'+$(window).height());
    console.log('滚动条距顶部距离(页面超出窗口的高度)'+$(window).scrollTop());
    console.log('----------------------------------');
    })
})
</script>
<div class="box" style="height:800px; background:red"></div>
</body>
</html>

 

posted @ 2014-05-19 10:53  tinyphp  Views(236)  Comments(0)  Edit  收藏  举报