js實現吸頂效果

2021-09-27 10:43:05 字數 1007 閱讀 3659

今天在專案裡遇到乙個吸頂的需求,在這裡記錄一下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>

此時,在其他頁面因為獲取不到#zyid,會報錯,只需要判斷是否獲取到#zyid即可

handlescroll:

function()

},

css的position屬性可以更簡單的實現吸頂效果,詳情點此☛

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...