页面滚动头部固定 背景色显现

页面滚动头部固定 背景色显现

效果图

未滚动前

滚动后

结构代码：

 <div class="top" id="topdiv" :class="isScorll ? 'scrollTop' : ''" >
 </div>

方法：

 mounted() {
    window.addEventListener('scroll', this.showIcon);
  },
   methods: {
    showIcon() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 100
      ) {
        this.isScorll = true;

      } else {
         this.isScorll = false;
      }
    }
    }

样式

.scrollTop {
  box-shadow: 0px 2px 5px #000;
  background: #222;
}

下面头部完整代码：

<template>
  <!-- toubu -->
  <div class="top" id="topdiv" :class="isScorll ? 'scrollTop' : ''" >
    <img
      src="../assets/img/hearder/logo.png"
      alt=""
      @click="tologin()"
      style="cursor: pointer;"
    />
    <div class="tabs">
      <p
        :class="{ tabsflagcolor: $route.name == 'home' }"
        @click="changeTabs(1)"
      >
        {{ $store.state.isChinese ? '首页' : 'Home page' }}
      </p>
      <p
        :class="{ tabsflagcolor: $route.name == 'service' }"
        @click="changeTabs(2)"
      >
        {{ $store.state.isChinese ? '服务中心' : 'Service center' }}
      </p>

      <p
        :class="{ tabsflagcolor: $route.name == 'apply' }"
        @click="changeTabs(3)"
      >
        {{ $store.state.isChinese ? '联系我们' : 'Contact us' }}
      </p>
    </div>

    <div style="visibility:hidden">
      <Input
        v-model="keyword"
        class="search"
        icon="ios-search"
        :placeholder="$store.state.isChinese ? '搜索' : 'search'"
        @on-enter="enterKeyword()"
        @on-click="enterKeyword()"
      />
    </div>

    <Dropdown>
      <a href="javascript:void(0)">
        {{ language }}
        <Icon type="ios-arrow-down"></Icon>
      </a>
      <DropdownMenu slot="list">
        <DropdownItem name="'EN'" @click.native="changeLanguage('EN')"
          >EN</DropdownItem
        >
        <DropdownItem name="'CH'" @click.native="changeLanguage('CH')"
          >CN</DropdownItem
        >
      </DropdownMenu>
    </Dropdown>

    <!-- <span class="loginbtn" style=" cursor: pointer;" @click="toLogin()">
        {{ $store.state.isChinese ? '登陆' : 'Login' }}</span
      > -->
  </div>
</template>

<script>
export default {
  name: 'headerTop',
  data() {
    return {
      keyword: '',
      language: 'CH',
      isScorll:false,
    };
  },
  created() {},
  mounted() {
    window.addEventListener('scroll', this.showIcon);
  },
  methods: {
    showIcon() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 100
      ) {
        this.isScorll = true;

      } else {
         this.isScorll = false;
      }
    },
    enterKeyword() {},
    tologin() {
      this.$router.push({
        name: 'login',
      });
    },
    // 切换tab栏
    changeTabs(v) {
      if (v == 1) {
        this.$router.push({
          name: 'home',
        });
      } else if (v == 2) {
        this.$router.push({
          name: 'service',
        });
      } else if (v == 3) {
        this.$router.push({
          name: 'apply',
        });
      }
    },
    // 中英切换
    changeLanguage(v) {
      this.language = v;
      if (v == 'EN') {
        this.$store.commit('changeState', false);
      } else {
        this.$store.commit('changeState', true);
      }
    },

    toAppyl() {
      this.$router.push({
        name: 'apply',
      });
    },
    toLogin() {
      // this.$router.push({
      //   name: 'login',
      // });
    },
  },
};
</script>

<style lang="less" scoped>
.scrollTop {
  box-shadow: 0px 2px 5px #000;
  background: #222;
}
.top {
  padding: 0 200px;
  height: 80px;
  color: #eee;
  z-index: 99999;
  right: 0px;
  position: sticky;
  top: 0px;
  left: 0px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 1200px;
  width: 100%;
  .tabs {
    display: flex;
    height: 100%;
    align-items: center;
    min-width: 440px;
    margin-left: 30px;

    p {
      cursor: pointer;
      font-size: 18px;
      padding: 20px 15px;
      margin-right: 20px;
    }
    p:hover {
      // color: #3399ff;
      color: rgb(114, 206, 255);
    }
  }
  .tabsflagcolor {
    // color: #3399ff;
    border-bottom: 2px solid rgb(114, 206, 255);
    color: rgb(114, 206, 255);
  }

  img {
    width: 72px;
    height: 45px;
  }

  /deep/.search {
    display: flex;
    align-items: center;

    .ivu-input-default {
      padding-left: 20px;
      width: 400px;
      height: 46px;
      background: #ffffff;
      border: 1px solid #707070;
      opacity: 1;
      border-radius: 80px;
    }
    .ivu-input-icon {
      font-size: 22px;
      margin-right: 10px;
      color: #0092df;
    }

    .ivu-icon-ios-search:hover {
      color: #0092df;
    }
  }

  .apply {
    cursor: pointer;
  }
  .apply:hover {
    color: #0092df;
  }
  .ivu-dropdown {
    font-size: 18px;
    margin: 0 30px;
    min-width: 100px;
    a {
      color: #eee !important;
    }
  }
  .loginbtn {
    font-size: 18px;
    color: #eee !important;
  }
  .loginbtn:hover {
    // color: #0092df;
    color: rgb(114, 206, 255);
  }
}
</style>