js實現吸頂效果

今天在專案裡遇到乙個吸頂的需求，在這裡記錄一下js的寫法

思路：先在mounted裡用window.addeventlistener監聽一下滑鼠滾輪事件，再用getboundingclientrect().top獲取需要吸頂的box距離頂部的值，判斷這個值是否<=0，如果是就給全域性變數zyfixed賦值為true，在div裡用三元運算進行判斷，符合條件就新增乙個isfixed類名。

="zy" id=
"zyid"
>
="zy_left" ref=
"zyscroll"
>
class
="[zyfixed == true ? 'isfixed' :'','zy_left_con']"
>
吸頂box<
/p>
<
/div>
<
/div>
="zy_right"
>
<
/div>
<
/div>
<
/template>
export
default;}
,mounted()
, methods:,}
};<
/script>
"less" scoped>
.isfixed 
<
/style>

handlescroll:

function()
},

vue sticky 吸頂效果

頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 頭部展示內容 自動粘滯固定頭部，需要一直展示的 tabs內部內容，最帥程式設計師專享受 我的最愛 李易峰 tabs內部內容，最帥程式...

Html吸頂效果

html中需要給div乙個id 專門建立的學習q q u n 731771211，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧 從零基礎開始到前端專案實戰教程，學習工具，全棧開發學習路線以及規劃 1 封裝方法 封裝吸頂函式，需結合css實現。也可以直接用js改變樣式，可以自行修改。f...

使用vue實現吸頂效果

獲取吸頂元素的dom let header this refs.header 吸頂元素到top的距離 this offsettop header.offsettop 元素自身的高度 this offsetheight header.offsetheight 監聽滾動條 window.addevent...