監聽滾動條滾動設置頂部導航背景色樣式

首先監聽滾動條

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;