dom位置属性

这些都是不带单位的

7dom位置属性1.png

所以平时用clientX就行，知道有offsetX就行。

7滚动对象属性.png

有滚动条的东西就可以用这两个

scrollleft表示水平滚动条滚动了多少，scrolltop表示竖直滚动条滚动了多少

设置scrolltop=0可以让页面返回顶部，注意兼容写法要将两种都写

document.onclick=function(){
  document.documentElement.scrollTop=0;
  document.body.scrollTop=0;
}

这样是瞬间到达顶部，没有动画效果。

documentElement表示的就是html元素

1想要返回顶部的动画.png

window.onscroll是监听，只要页面发生滚动就会触发对应函数。不论是滚动鼠标滚轮，还是通过js代码让scrollTop发生变化。

1导航条固定的效果.png

为了防止nav固定定位后（脱离文档流），下面的内容会往上顶，所以给他套了一个父容器，高度跟nav的高度一样来占位。滚动距离超过header的高度之后就让nav固定定位，滚回去还要设置为默认定位方式。

获取浏览器窗口的高度（不是文档的高度）

谷歌浏览器&ie9级以上可以
1.window.innerHeight
2.document.documentElement.clientHeight

ie8及以下可以
document.documentElement.clientHeight

var h=window.innerHeight
    ||document.documentElement.clientHeight
    ||document.body.clientHeight

这样写IE5出来都没事

如果一个块能用百分比撑开就可以不用这个获取这个值。

获取宽度也一样。

京东那种只显示首屏的内容，当用户往下滚动时才加载更多内容（触底加载），如果一下子吧内容全部加载出来的话，加载速度是比较慢的

1offset系列.png

平时咱们用他最多是为了获取元素到整个文档左上角的偏移量

但是只要他的父元素中有带有定位属性（relative，absolute或其他）的元素，他就是相对这个offsetparent左上角的距离，console.log(box.offsetParent)得到的是具有定位属性的这个dom。要是他所有的父元素中没有定位属性，那他就很巧合的是相对于整个文档左上角的距离console.log(box.offsetParent)得到的是body这个dom。

如果你的布局比较复杂的话，而你想要获取元素到文档左上角的距离，就要一层层找offsetparent，然后一直叠加offsetTop。

1楼层滚动.png

每次滚动页面都遍历循环所有的楼层，看是否在可视区域，每次都获取所有块的offsetTop，如果他距离浏览器窗口顶部的距离在100px之内就打印“出现”,break结束当前循环，因为只可能有一个块符合条件，不用再继续遍历下去，而条件i!=x是为了防止多次打印，滚过去之后再滚回来这个楼层肯定会再次打印，提示这个楼层又回来了。

1楼层滚动2.png

一般用区间表示到达的条件，因为你写成固定值的话，滚动太快容易把这个值略过去，他就识别不不到。但是你写成区间就有一个问题，他会多次执行这个代码。dom可以设置自定义属性，可以给他加一个flag属性。但是加了这个flag属性后第一次滚动到第三层是可以的，但是以后再滚动到第三层就不行了。