• 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;
  • 相关阅读:
    About_Web
    神奇的 SQL 之性能优化 → 让 SQL 飞起来
    Java实现Kafka生产者和消费者的示例
    Android屏幕绘制一问到底(无代码)
    关于数据库事务和锁的必会知识点,你掌握了多少?
    【Azure Cloud Services】云服务频繁发生服务器崩溃的排查方案
    Choreographer全解析
    气之争,聊聊算法岗位的门户之见!
    资深首席架构师预测:2021年云计算的8个首要趋势
    【并发编程】- 内存模型(针对JSR-133内存模型)篇
  • 原文地址:https://www.cnblogs.com/naturl/p/10905666.html
Copyright © 2020-2023  润新知