vue导航吸顶

所说的吸顶效果就是在页面没有滑动之前，当页面向上滑动之后，导航栏始终固定在页面的上方。

具体代码：

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

mounted () {
      // 事件监听滚动条
      window.addEventListener('scroll', this.watchScroll,true)
}

然后在 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~~