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

时间 2020-02-10

标签监听滚动条滚动设置顶部导航背景色样繁體版

原文原文链接

首先监听滚动条javascript

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

获取导航到顶部的距离css

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

html代码：html

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

css代码java

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