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,之后條件判斷永遠為真,則取消固定定位時無效。

學習疑問申請解答
您的姓名
您的電話
意向課程
 

中公優就業

IT小助手

掃描上方二維碼添加好友,請備注:599,享學習福利。

>>本文地址:
注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

推薦閱讀

優就業:ujiuye

關注中公優就業官方微信

  • 關注微信回復關鍵詞“大禮包”,享學習福利
QQ交流群
在線疑問解答
(加群備注“網站”)
IT培訓交流群 加入群聊 +
軟件測試 加入群聊 +
全鏈路UI/UE設計 加入群聊 +
Python+人工智能 加入群聊 +
互聯網營銷 加入群聊 +
Java開發 加入群聊 +
PHP開發 加入群聊 +
VR/AR游戲開發 加入群聊 +
大前端 加入群聊 +
大數據 加入群聊 +
Linux云計算 加入群聊 +
優就業官方微信
掃碼回復關鍵詞“大禮包”
享學習福利

測一測
你適合學哪門IT技術?

1 您的年齡

2 您的學歷

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

獲取測試結果
 
課程資料、活動優惠 領取通道
 
 
黄色片日本,日本网站,真人一级一级97片看一级毛片,日本黄区免费视频播放