vue 吸頂選單效果小demo

整個吸頂小demo

場景描述，如下圖：

功能描述：當滾動條劃過輪播圖的時候 讓正在熱映和即將上映 這塊吸頂，滾動條滾動回去的時候吸頂消失

吸頂效果邏輯:

當滾動條滾動一定的距離例如（輪播圖）的時候加乙個class 滾回來刪除那個class

** 如果滾動距離大於等於輪播的高度 fixed 小於 unfixed

1.滾動距離怎麼獲取：(document.documentelement.scrolltop) 操作原生

2.輪播圖高度怎麼動態獲取：

* 原生做法: 給dom 起個id 獲取到dom ( 隱藏實力 不能讓人家知道你會原生)

* vue中:

+ 用ref 掛在到普通節點拿到的是原生dom;

+ 掛在到元件上拿到的是物件(this.$refs.myswiper. $el.offsetheight)

** 怎麼給元件動態的增加class： 陣列 三目 物件

data () 

}, mounted () ,
// 不影響其他元件要離開的時候解綁
beforedestroy () ,
methods: else 
}}

.fixed

使用vue實現吸頂效果

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

視覺差效果和吸頂式導航欄

1.需要引用js包 2.寫html 3.引用css three text center b three image 背景一定要設定position absolute 和background attachment fixed html裡面要加的一句 data stellar background ra...

jQuery自定義外掛程式之吸頂條效果

jquery自定義外掛程式之吸頂條效果是網頁中最常見不過的外掛程式了，所以寫乙個自用的jquery自定義外掛程式之吸頂條效果外掛程式，偷懶一下。上原始碼，想用的直接複製走，儲存在乙個js檔案即可使用。author jiaoshou date 2020 07 09 16 46 34 last modi...