如何在Vue專案中實現吸頂元素

2021-09-05 10:50:40 字數 492 閱讀 7073

我的思路就是判斷合適的時候將這個元素的position設為fixed,那麼這個合適的時機如何判斷呢?我們可以計算頁面滾動的距離。

mounted鉤子中加入以下**:

mounted() ,
離開頁面時要移除監聽,在destroyed鉤子中移除監聽:

destroyed(),
// 監聽dom渲染完成

this.$nexttick(function());

handlescroll(),
得到乙個boolean值的headerfixed,然後就可以動態設定樣式了。

.isfixed
在dom中:

知識模組

知識點能力要求

vue監聽滾動事件 實現某元素吸頂或者固定位置顯示

1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,mounted 然後在方法中,新增這個handlescroll方法 handlescroll 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於了元素到頂部的距...

vue監聽滾動事件 實現某元素吸頂或者固定位置顯示

1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,mounted function 然後在方法中,新增這個handlescroll方法 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於了元素到頂部的距離時,設...

vue監聽滾動事件 實現某元素吸頂或者固定位置顯示

1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先,在mounted鉤子中給window新增乙個滾動滾動監聽事件,mounted 然後在方法中,新增這個handlescroll方法 handlescroll 控制台列印結果 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於...