4. 获取浏览器/元素属性

1. event

event.clientX / Y — 可视区横 / 纵坐标

event.pageX / Y — 相对于容器的水平 / 垂直坐标（ie8-不兼容）

扩展：event.pageY = scrollTop + clientY

 

2. 可视区宽 / 高

 document.documentElement.clientWidth / clientHeight

 

3. 页面垂直滚动位置

document.documentElement.scrollTop || document.body.scrollTop 　　ie11- || 现代浏览器

注：需放在window.onscroll = function(){}内

 

4. 距离定位元素的左 / 上边距（相对于父元素的位置）

obj.offsetLeft / obj.offsetTop

扩展：获取元素相对于文档的位置

function getPos(obj) {

　　var l = 0;

　　var t = 0;

 

　　while (obj) {

　　　　l += obj.offsetLeft;

　　　　t += obj.offsetTop;

　　}

　　return {left: l, top: t}

}

 

offsetParent — 定位父级

offsetParent根body --> null

结构的根：document --> null

定位的根：body --> null

 

jquery：

$obj.position().left / top — 相当于obj.offsetLeft / top

$obj.position().left / top — 相当于getPos(obj)