js 吸顶以及一些获取文档高度等小方法

1.返回html文档元素
document.documentElement

2.文档的高度
document.body.clientHeight

3.html文档可视高度==页面可见区域的高度
document.documentElement.clientHeight

4.获取元素距离文档顶部的距离
document.querySelector('.a').offsetTop

5.获取元素距离可视区域顶部的距离(测试有偏差)left,bottom,right,分别距离页面左边，下边，右边
document.querySelector('.a').getBoundingClientRect().top

6.滚动条距离文档顶端的距离
document.documentElement.scrollTop

 这是吸底的，吸顶把判断条件改成：sh < 200   200就是滚动条滑动多少距离开始吸顶

(代码可复制直接看效果，因为谷歌每次滚动距离正负100，所以效果可能没那么好，如果有什么好方法，麻烦指教)

*{margin: 0;padding: 0}
.con{ 100px;height: 200px;border: 1px solid lime}
.a{ 100%;height: 100px;background: lime;}
.scroll_avtive{position: fixed;left: 0;bottom: 0;}

　　

<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="a scroll_avtive"></div> <!--固定元素，其他div只为显示出滚动条-->
<div class="foot con"></div>

// 获取吸顶元素的高度，并转化为整数
    let fixedElH = parseInt(getComputedStyle(document.querySelector('.foot'),null).height)
    // 获取文档高度
    let dh = document.body.clientHeight
    
    //获取可视区域的高度
    let vh = document.documentElement.clientHeight
    //获取固定元素
    let a =  document.querySelector('.a')
    let scrollFunc=function(e){
        //获取滚动条滚动距离
        let sh = document.documentElement.scrollTop||document.body.scrollTop;
        // event事件兼容写法
        e=e || window.event;
        ////IE/Opera/Chrome浏览器使用的是wheelDelta，并且值为“正负120”（使用chrome是正负100）
        console.log(sh)
        if(e.wheelDelta){ 
            // document.documentElement.scrollTop+=50
           if(dh-sh < vh+fixedElH){
                a.classList.remove('scroll_avtive')
            }else{
                a.classList.add('scroll_avtive')
            }
            //Firefox
        }else if(e.detail){

        }
    }
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }//W3C
    //IE/Opera/Chrome
    window.onmousewheel=document.onmousewheel=scrollFunc;