监听滚动条滚动设置顶部导航背景色样式

2019独角兽企业重金招聘Python工程师标准>>>

首先监听滚动条

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

获取导航到顶部的距离

handleScroll() {
        //获取导航到顶部的距离
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop == 0) {
          this.nav = true;
          return;
        } else {
          this.nav = false
        }
      }

html代码：

<div :class="nav ? 'nav bg': 'nav'">
    <div class="container">
      <div class="images">

css代码

 .bg {
    background-color: transparent !important;
  }
  .nav {
    width: 100%;
    height: 80px;
    position: fixed;

 

转载于:https://my.oschina.net/u/3949469/blog/3048093