获取距离

基本情况：

显示器的屏幕信息

screeen.height 屏幕分辨率的高（定值）
screen.width 屏幕分辨率的宽（定值）
screen.availHeight 屏幕可用高度（屏幕分辨率的高度-上下测任务栏的高度，定值）
screen.availWidth 屏幕可用宽度（屏幕分辨率的宽度-左右侧任务栏的宽度，定值）

浏览器信息

window.outerHeight 浏览器高度
window.innerHeight 浏览器可用高度
window.outerWidth 浏览器宽度
window.innerWidth 浏览器可用宽度

三大家族

短路运算

&&：短路与， 只要碰到了false，就会短路，短路后不会执行第二个表达式。

||：短路或，只要碰到了true就会短路，短路后不会执行第二个表达式。

注意：&&和||的结果不一定是布尔类型，也可以是其他的类型

||经常用来给函数设置默认值

三大家族

offset家族

offset系列用于用于获取元素自身的大小和位置，在网页特效中有广泛应用

offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop

offsetHeight与offsetWidth

1. 获取的是元素真实的高度和宽度
2. 获取到的是数值类型，方便计算
3. offsetHeight与offsetWidth是只读属性，不能设置。

offsetHeight与offsetWidth的构成

​ offsetHeight = height + paddnig + border

​ offsetWidth = width + padding + border

scroll家族

scroll家族用来获取盒子内容的大小和位置

scroll家族有：scrollWidth、scrollHeight、scrollLeft、scrollTop

1. scrollWidth与scrollHeight是盒子内容的真实的宽度和高度。与和盒子大小无关，仅仅与盒子的内容有关系。
2. scrollTop用于获取内容垂直滚动的像素数。如果没有滚动条，那么scrollTop值是0

onscroll事件，对于有滚动条的盒子，可以使用onscroll注册滚动事件，每滚动一像素，就会触发该事件。

var box = doucment.getElementById(“box”);
box.onscroll = function(){
	//事件处理程序
}

获取页面被卷去的高度和宽度

通常来说，scroll家族用的最多的地方就是用来获取页面被卷去的宽度和高度，非常的常用

页面被卷去的高度和宽度

window.onscroll = function() {
  var scrollTop = window.pageYOffset
  var scrollLeft = window.pageXOffset
}

【仿腾讯固定导航案例.html】

client家族

client家族用于获取盒子可视区的大小

client家族有clientWidth、clientHeight、clientLeft、clientTop

clietnWidth: 获取内容和padding的大小

clientHeight:获取内容与padding的大小

clientTop与clientLeft

clientTop与clientLeft 完全没有用，他们就是borderTop与borderLeft

三大家族对比

onresize事件：onresize事件会在窗口被调整大小的时候发生。

window.onresize = function(){
	//事件处理程序
    var width = window.innerWidth;
    var height = window.innerHeight
}

页面信息

1. document.body.offsetHeight body的总高度，也成为网页可见区域的高度（包括边框宽度）
2. document.body.offsetWidth body的总宽度，也成为网页可见区域的宽度（包括边框宽度）
3. document.body.clientHeight body向用户展示的高度，也成为网页可见区域的高度（不包括边框宽度）
4. document.body.clientWidth body向用户展示的宽度，也成为网页可见区域的宽度（不包括边框宽度）

documwnt.body.scrollHeight=document.body.clientHeight：body的滚动高度

documwnt.body.scrollWidth: body的滚动宽度

scrollHeight：对象的滚动高度为对象的height值
scrollWidth：对象的滚动宽度为对象的width值

clientWidth=width+padding
offsetWidth=clientWidth+border

对比

clientX	鼠标到可视区的水平距离	如果页面有垂直滚动条则有可能没有需要的结果
clientY	鼠标到可视区的垂直距离	如果页面有垂直滚动条则有可能没有需要的结果
pageX	鼠标到页面的水平距离	（常用）不管页面多长都能实现效果
pageY	鼠标到页面的垂直距离	（常用）不管页面多长都能实现效果
screenX	鼠标到屏幕的水平距离	当浏览器窗口移动，数值与上面两个都不一样
screenY	鼠标到屏幕的垂直距离	当浏览器窗口移动，数值与上面两个都不一样