Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

所说的吸顶效果就是在页面没有滑动之前，导航栏的效果如下图所示：

当页面向上滑动之后，导航栏始终固定在页面的上方。

具体代码：

写入事件监听，监听滚动条。

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~~

作者：Howie126313
链接：https://www.jianshu.com/p/c2f2830ef9fa
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。