Vue 实时监听滚动轴实现导航自动吸顶 记录一下

简单地理解就是当滚动下拉网页时，原本处在顶部的导航会随着下拉而消失。
这时候如果想让导航在下拉到某位置时固定住，不让其消失而减少来回滑动的次数。
那么就需要实时监听滚动轴值的变化，以此来控制导航 。
再说的浅显点就是 随着下拉，上面的内容看不到，但控制其自动吸顶，就会一直出现在顶部
而不会随着下拉而看不到。
1.首先，定义一个方法 watchScroll

export default {
  name: "login",
  data() {
    return {
    navBarFixed:'',      // 写上 不然报错
    }
  },
  methods: {
    watchScroll() {
      var scrollTop =  window.pageYOffset ||  document.documentElement.scrollTop ||  document.body.scrollTop;
      console.log(scrollTop);           
      if (scrollTop > 120) {                 //  当滚动超过 120 时，实现吸顶效果 ，
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    }
  }
}

2.接着 在页面mounted时，添加一个附加侦听器

mounted() {
    window.addEventListener("scroll", this.watchScroll);    // 事件监听滚动条值的变化
  }

3.接着 需要install一下 less 用的是less写法，
①安装less依赖，npm install less less-loader --save-dev
②接下来找到bulid目录下的webpack.base.conf.js并打开，找到module下的rules写下

     {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
     },

③那时我装完用不了 然后看了下发现还得装style-loader css-loader这两个
三个一起才能用，也不知道是不是我配置写了这两个 也没去调试过。
4.接着，就可以打开组件文件在下面style标签里面写上 lang=“less” 表示以less语法解析css了
这里放一个待会要用到样式

<style lang="less" scoped>
.n-i {
  .isFixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #22d7bb;
    transition: all 0.5s ease-out, opacity 0.5s ease-out;
    padding: 0;
    text-align:center;
  }
}
</style>

5.走完上面的所有流程之后，就可以来实现了 这里贴个小李子

<template>
  <div>
    <div class="n-i">
    <div class="n-one" v-bind:class="navBarFixed == true ? 'isFixed' :''">绑定了一个navBarFixed样式属性 
    为true时 用n-one的样式，为false时 用n-i的样式，以此来实现，导航自动吸顶效果</div>
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      navBarFixed:'',
    }
  },
  mounted() {
    window.addEventListener("scroll", this.watchScroll);
  },
  methods: {
     getshow(){
      this.isshow = !this.isshow;
    },
    watchScroll() {
      var scrollTop =  window.pageYOffset ||  document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop);
      if (scrollTop > 2) {               //  当滚动超过 2 时，实现吸顶效果
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    }
  }
}
</script>

<style scoped>
.n-one{
  width: 80%;
  background: #009688;
  color: white;
  text-align:center;
}
</style>
<style lang="less" scoped>
.n-i {
  .isFixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #22d7bb;
    transition: all 0.5s ease-out, opacity 0.5s ease-out;
    padding: 0;
    text-align:center;
  }
}
</style>

6.接着来看下效果


当scrollTop大于2时吸顶 样式也变化了。
7.大致就这样 记录一下。
个人理解 个中不足 望指出。