• 400-650-7353

    精品课程

    您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】如何使用js实现固钉效果

    【Web前端基础知识】如何使用js实现固钉效果

    • 发布: Web前端培训
    • 来源:Web前端干货资料
    • 2021-03-22 16:29:11
    • 阅读()
    • 分享
    • 手机端入口

    当内容区域比较长,需要滚动页面时,部分内容需要在滚动范围内的顶部始终展现,这种效果就称之为固钉。那我们该如何使用js来实现这种结果呢。

    在实现该效果之前,我们需要掌握body位置属性中offset系列和scroll系列。

    其关系如下图所示:

    offset系列中常用的属性为:

    1. 获取元素的占位宽高

    ① 元素.offsetWidth:获取元素的占位宽—width+padding+border

    ② 元素.offsetHeight:获取元素的占位高—height+padding+border

    2. 获取元素在页面中的位置

    ① 元素.offsetTop:当前元素的顶部,到定位父元素的距离,没有定位父元素,到 body 的距离;

    ② 元素.offsetLeft:当前元素的左边,到定位父元素的距离,没有定位父元素,到 body 的距离;

    scroll系列中常用的为:

    1. 元素的滚动(当该元素内部出现了滚动条)

    ① 元素.scrollTop:元素被卷去的高;

    ② 元素.scrollLeft:元素被卷去的宽;

    ③ 元素.scrollWidth:获取元素实际内容宽;

    ④ 元素.scrollHeight:获取元素实际内容高;

    2. 屏幕的滚动距离:

    document.documentElement.scrollTop:获取页面被卷去的高。

    为了兼容ie一般为则需要用 document.body 代替 document.documentElement。

    那之后我们来分析我们要实现的效果,例如在该图示中黑色矩形代表窗口,红色矩形代表整个html页面,在我们滚动页面时当黄色块走到窗口顶部时让其停留在窗口顶部。

    接下来页面滚动时我们需要知道当前页面的滚动距离即document.documentElement

    .scrollTop,和黄色块距离页面顶部的距离即offsetTop,在滚动的过程中比较这两个值的大小,当页面被卷去的高度 >= 黄色块距离页面顶部的距离时,黄色块应该定在窗口顶端,这时应该给黄色块添加一个固定定位。当条件不满足时,再将其固定定位取消掉。

    代码为:

    1. <style> 
    2. div{ 
    3.         width: 100%; 
    4.         height: 150px; 
    5.         background: tomato; 
    6.         margin-bottom: 10px; 
    7.     } 
    8.     #con{ 
    9.         background: yellow; 
    10.     } 
    11.     .active{ 
    12.         position: fixed; 
    13.         top:0; 
    14.         left: 0; 
    15.     } 
    16. </style> 
    17. <body> 
    18.     <div></div> 
    19.     <div></div> 
    20.     <div></div> 
    21.     <div></div> 
    22.     <div id="con"></div> 
    23.     <div></div> 
    24.     <div></div> 
    25.     <div></div> 
    26.     <div></div> 
    27.     <div></div> 
    28.     <div></div> 
    29. </body> 
    30. <script> 
    31.     var oCon = document.getElementById('con'); 
    32.     // 需要先在外面存储一下这个值,因为加了定位之后会变为获取到定位父元素的距离,为0 
    33.     var offsetT = oCon.offsetTop; 
    34. // 当页面被卷去的高度 >= 红盒子在页面中的位置时,红盒子就定在顶部 
    35. // 添加滚动事件 
    36.     window.onscroll = function(){ 
    37.         var scrollH = document.documentElement.scrollTop || document.body.scrollTop; 
    38.         if(scrollH >= offsetT){ 
    39.              oCon.className = 'active'
    40.         }else{ 
    41.              oCon.className = ''
    42.          } 
    43.     } 
    44. </script> 

    需要注意的是:在页面滚动之前我们要先获取黄色块距离页面顶部的距离,因为offsetTop的值在元素没有定位的情况下,获取的才是其在页面中的位置。当加了固定定位之后该值会为0,之后条件判断永远为真,则取消固定定位时无效。

    课程好礼申请领取
    您的姓名
    您的电话
    意向课程
     

    中公优就业

    官方QQ

    扫描上方二维码或点击一键加群,免费领取价值599元网课,加群暗号:599。 一键加群

    >>本文地址:
    注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

    推荐阅读

    优就业:ujiuye

    关注中公优就业官方微信

    • 关注微信回复关键词“大礼包”,领80G学习资料
    QQ交流群
    领取免费网课
    (加群备注“网站”)
    IT培训交流群 加入群聊 +
    软件测试 加入群聊 +
    全链路UI/UE设计 加入群聊 +
    Python+人工智能 加入群聊 +
    互联网营销 加入群聊 +
    Java开发 加入群聊 +
    PHP开发 加入群聊 +
    VR/AR游戏开发 加入群聊 +
    大前端 加入群聊 +
    大数据 加入群聊 +
    Linux云计算 加入群聊 +
    优就业官方微信
    扫码回复关键词“大礼包”
    领取80G学习资料

    测一测
    你适合学哪门IT技术?

    1 您的年龄

    2 您的学历

    3 您更想做哪个方向的工作?

    获取测试结果
     
    课程资料、活动优惠 领取通道
     
     
    韩国毛茸茸的丰满妇女,亚洲国内自拍愉拍,高清性色生活片97,亚洲日本成本人观看 网站地图