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 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道