Vue 事件監聽實現導航欄吸頂效果（頁面滾動后定位）

 

Howie126313 關注

2017.11.19 15:05* 字數 100 閱讀 3154評論 0喜歡 0

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

 

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

 

具體代碼：

寫入事件監聽，監聽滾動條。

mounted () {
      // 事件監聽滾動條 window.addEventListener('scroll', this.watchScroll) } 

然后在 methods 中寫入 watchScroll 方法。

methods: {
      watchScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 當滾動超過 50 時，實現吸頂效果 if (scrollTop > 49) { this.navBarFixed = true } else { this.navBarFixed = false } } } 

在對應的標簽中加入修改后的樣式

<div :class="navBarFixed == true ? 'navBarWrap' :''"> 

.navBarWrap { position:fixed; top:0; z-index:999; } 

END~~