400-650-7353

精品课程

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

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

当内容区域比较长,需要滚动页面时,部分内容需要在滚动范围内的顶部始终展现,这种效果就称之为固钉。那我们该如何使用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。 一键加群

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

推荐阅读

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

1 您的年龄

2 您的学历

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

获取测试结果
 
课程资料、活动优惠 领取通道
 
 
网站地图 500w彩票网注册 500w彩票网游戏 澳门太阳城集团官网
申博手机网页版 申博娱乐官方下载 澳门赌场玩法 申博怎么登入
zn39 uc彩票斯洛伐克5分彩 皇冠彩票斯洛伐克28 中国足球进世界杯
彩29彩票网注册 500w彩票网平台 58彩票网网站 cc彩票游戏
五星彩票网址 五星彩票登录 五星彩票网注册 彩29彩票网注册
MAQINSHI.COM 508XTD.COM 189sunbet.com 1113887.COM 133DC.COM
S618R.COM 196psb.com 97jbs.com 45jbs.com 187PT.COM
99sbib.com 994sun.com 718sj.com 967SUN.COM 79jbs.com
33sbmsc.com XSB345.COM 666TGP.COM 81s8.com S618N.COM