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