所說的吸頂效果就是在頁面沒有滑動之前,導航欄的效果如下圖所示:

當頁面向上滑動之后,導航欄始終固定在頁面的上方。

具體代碼:
寫入事件監(jiān)聽,監(jiān)聽滾動條。
mounted () {
// 事件監(jiān)聽滾動條
window.addEventListener('scroll', this.watchScroll)
}
然后在 methods 中寫入 watchScroll 方法。
methods: {
watchScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// 當滾動超過 50 時,實現(xiàn)吸頂效果
if (scrollTop > 49) {
this.navBarFixed = true
} else {
this.navBarFixed = false
}
}
}
在對應的標簽中加入修改后的樣式
<div :class="navBarFixed == true ? 'navBarWrap' :''">
.navBarWrap {
position:fixed;
top:0;
z-index:999;
}
END~~