一. 基本方法
1、获取和设置元素的尺寸 width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置,相对于浏览器左上角 offset()
3、获取可视区高度，可视区就是一眼能看到的浏览器内容 $(window).height();
4、获取整个页面高度 $(document).height();
5、获取页面滚动距离 $(document).scrollTop(); //竖行滚动条位置，上方的网页内容 $(document).scrollLeft(); //正向滚动条左边的网页内容，不常用
6、页面滚动事件， $(window).scroll(function(){ ...... })
二. 例子
1. offset()绝对位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素绝对位置</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $pos = $('.pos'); //前面的$pos中，$没实际意义
var pos =$pos.offset();
var w = $pos.outerWidth();
var h = $pos.outerHeight();
//定义鼠标经过特殊盒子时，弹出框的样式在特殊盒子的旁边
$('.pop').css({left:pos.left+w,top:pos.top});
//绑定鼠标事件
$pos.mouseover(function(){
$('.pop').show();
})
$pos.mouseout(function(){
$('.pop').hide();
})
})
</script>
<style type="text/css">
.con{
600px;
height:600px;
margin:50px auto 0;
}
//定义盒子样式
.box{
100px;
height:100px;
background-color:gold;
margin-bottom:10px;
}
//定义特殊盒子的样式
.pos{
margin-left:500px;
}
//定义鼠标经过特殊盒子时，出来的弹出框
.pop{
100px;
height:100px;
background-color:red;
position:fixed;
left:0;
top:0;
display:none;
}
</style>
</head>
<body>
<div class="con">
<div class="box"></div>
<div class="box"></div>
<div class="box pos"></div>
<div class="box"></div>
</div>
<div class="pop">
提示信息！
</div>
</body>
</html>
2. 置顶菜单例子，验证页面滚动事件这种方法
需求：网页上有一个菜单栏，位置在页面的200px处，想在拉动滚动条至200px时，固定这个菜单栏；当上拉小于200px时，这个菜单栏又回复自由。需要注意的是浏览器默认有8px的margin，所以实际是208px
关键点：
1. 使用scrollTop()来找到下拉距离，比如这里是200px, 当达到这个值时就固定这个菜单栏位置，可用样式中的position:fixed实现
2. jquery中的hide(),show()函数，当盒子样式中有display:none属性时，可以使用这两种函数来实现盒子的显示和隐藏。
3. 这里(.menu.pos)的作用是当置顶菜单盒子自由时，它表示的盒子隐藏；否则它就显示。作用是当置顶菜单固定时，会跳出原先的布局，使下面的盒子自动顶上去，会出现突然跳动的视觉效果。而(.menu.pos）的作用就是顶替原先置顶盒子元素的位置，解决突然跳动的问题。
4. totop类是为了在页面底部添加一个返回页面开头的链接，实现动画的慢慢移动到页面头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>置顶菜单</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function() {
var nowTop = $(document).scrollTop();
if(nowTop>200){
$('.menu').css({
position:'fixed',
left:'50%',
top:0,
marginLeft:-480
});
$('.menu_pos').show();
}
else{
$('.menu').css({
position:'static', //static是默认值，表没定位
marginLeft:'auto'
});
$('.menu_pos').hide();
}
//这里控制什么时候出来回到页首的链接图片
if(nowTop>400){
$('.totop').fadeIn();
}
else{
$('.totop').fadeOut();
}
});
$('.totop').click(function() {
$('html,body').animate({'scrollTop':0}); //固定写法，实现慢慢移动到页首
});
})
</script>
<style type="text/css">
body{margin:0px;}
.logo_bar{
960px;
height:200px;
background-color:#f0f0f0;
margin:0 auto;
}
.menu,.menu_pos{
960px;
height:50px;
margin:0 auto;
background-color:gold;
text-align:center;
line-height:50px;
}
.menu_pos{
display:none;
}
.down_con{
960px;
height:1800px;
margin:0 auto;
}
.down_con p{
margin-top:100px;
text-align:center;
}
.totop{
50px;
height:50px;
background:url(images/up.png) center center no-repeat #000;
border-radius:50%;
position:fixed;
right:50px;
bottom:50px;
display:none; //滚动条在页面上部时，链接箭头不显示
}
</style>
</head>
<body>
<div class="logo_bar">顶部logo</div>
<div class="menu">置顶菜单</div>
<div class="menu_pos"></div>
<div class="down_con">
<p style="color:red">网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
</div>
<a href="javascript:;" class="totop"></a>
</body>
</html>