使用vue實現吸頂效果

// 獲取吸頂元素的dom

let header =
this
.$refs.header;
// 吸頂元素到top的距離
this
.offsettop = header.offsettop;
// 元素自身的高度
this
.offsetheight = header.offsetheight;
// 監聽滾動條
window.
addeventlistener
("scroll"
,this
.handlescroll)
;// 得到頁面滾動的距離，相容寫法
let scrolltop =
window.pageyoffset ||
document.documentelement.scrolltop ||
document.body.scrolltop;
// 判斷頁面滾動的距離是否大於吸頂元素的位置
this
.headerfixed = scrolltop >
this
.offsettop -
this
.offsetheight;

>

class
="home"
>
ref=
"header"
class
="header-bg"
:class
="headerfixed?'issfixed':''"
>
headerdiv
>
style
="height
: 500px
">
111div
>
style
="height
: 300px
">
222div
>
>
333div
>
div>
template
>
>
export
default;}
,mounted()
);},
destroyed()
, methods:}}
;script
>
>
.issfixed
.header-bg
style
>

js實現吸頂效果

今天在專案裡遇到乙個吸頂的需求，在這裡記錄一下js的寫法 思路 先在mounted裡用window.addeventlistener監聽一下滑鼠滾輪事件，再用getboundingclientrect top獲取需要吸頂的box距離頂部的值，判斷這個值是否 0，如果是就給全域性變數zyfixed賦值...

vue sticky 吸頂效果

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

Html吸頂效果

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