400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識】如何使用js實現(xiàn)固釘效果

【W(wǎng)eb前端基礎(chǔ)知識】如何使用js實現(xiàn)固釘效果

  • 發(fā)布: Web前端培訓
  • 來源:Web前端干貨資料
  • 2021-03-22 16:29:11
  • 閱讀()
  • 分享
  • 手機端入口

當內(nèi)容區(qū)域比較長,需要滾動頁面時,部分內(nèi)容需要在滾動范圍內(nèi)的頂部始終展現(xiàn),這種效果就稱之為固釘。那我們該如何使用js來實現(xiàn)這種結(jié)果呢。

在實現(xiàn)該效果之前,我們需要掌握body位置屬性中offset系列和scroll系列。

其關(guān)系如下圖所示:

offset系列中常用的屬性為:

1. 獲取元素的占位寬高

① 元素.offsetWidth:獲取元素的占位寬—width+padding+border

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

2. 獲取元素在頁面中的位置

① 元素.offsetTop:當前元素的頂部,到定位父元素的距離,沒有定位父元素,到 body 的距離;

② 元素.offsetLeft:當前元素的左邊,到定位父元素的距離,沒有定位父元素,到 body 的距離;

scroll系列中常用的為:

1. 元素的滾動(當該元素內(nèi)部出現(xiàn)了滾動條)

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

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

③ 元素.scrollWidth:獲取元素實際內(nèi)容寬;

④ 元素.scrollHeight:獲取元素實際內(nèi)容高;

2. 屏幕的滾動距離:

document.documentElement.scrollTop:獲取頁面被卷去的高。

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

那之后我們來分析我們要實現(xiàn)的效果,例如在該圖示中黑色矩形代表窗口,紅色矩形代表整個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.     // 需要先在外面存儲一下這個值,因為加了定位之后會變?yōu)楂@取到定位父元素的距離,為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,之后條件判斷永遠為真,則取消固定定位時無效。

文章“【W(wǎng)eb前端基礎(chǔ)知識】如何使用js實現(xiàn)固釘效果”已幫助

>>本文地址:http://m.littlerockbway.com/zhuanye/2021/68022.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學歷

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

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內(nèi)設(shè)計室內(nèi)設(shè)計
  • 平面設(shè)計平面設(shè)計
  • 電商設(shè)計電商設(shè)計
  • 網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計
  • 全鏈路UI/UE設(shè)計UI設(shè)計
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發(fā)智能機器人
 

快速通道fast track

近期開班時間TIME