js与jquery位置、大小相关的获取

js原生

窗口大小(分辨率)

屏幕的宽 : window.screen.width
屏幕的高 : window.screen.height

窗口位置

窗口距离上边 : window.screenTop
窗口距离左边 : window.screenLeft

可视区域大小

可视区域的宽 : window.innerWidth/document.documentElement.clientWidth(不算滚动条的17px)
可视区域的高 ：window.innerHeight/document.documentElement.clientHeight

文档的大小

文档的宽 : document.documentElement.offsetWidth(内容+内边距+边框+外边距)/document.body.clientWidth(内容+内边距）
文档的高 : document.documentElement.offsetHeight(内容+内边距+边框+外边距)/document.body.clientHeight(内容+内边距）

滚动条位置

滚动条距离上边 : document.documentElement.scrollTop
滚动条距离左边 : document.documentElement.scrollLeft
**注意一点IE浏览器下的滚动条获取**
滚动条距离上边 : document.body.scrollTop
滚动条距离左边 : document.body.scrollLeft

元素大小

var middle = document.querySelector('.middle')
元素的宽 : middle.offsetWidth(内容+内边距+边框)/middle.clientWidth(内容+内边距)
元素的高 : middle.offsetHeight(内容+内边距+边框)/middle.clientHeight(内容+内边距)

元素位置

var pos = document.querySelector('.pos')
元素距离父元素的定位位置向上的偏移量 : pos.offsetTop
元素距离父元素的定位位置向左的偏移量 : pos.offsetLeft
js原生没有直接到窗口的距离  可以通过计算父元素的偏移量加上子元素的偏移量就可以了

jquery

浏览器视图的大小

浏览器视图的宽 : $(window).width()
浏览器视图的高 : $(window).height() 

文档的大小

文档的高宽 $(document).width(),$(document).height()
文档的滚动条 $(document).scrollLeft(),$(document).scrollTop()

元素的大小

元素的宽 : $().width() (内容)/ $().innerWidth()(内容+内边距)
元素的高 : $().height() (内容)/ $().innerHeight()(内容+内边距)

元素的位置

元素针对于文档的位置 :  $().offset().top/$().offset().left
元素针对父元素的位置 :  $().position().left /$().position().top

元素滚动条

元素滚动条的位置 $().scrollLeft()/$().scrollTop()