HTML页面顶部导航栏随着滚轮转动页面也跟着下滑

导航栏背景颜色，透明度，字体，样式等改变

一、大盒子app里有一个heades的导航栏，通过:style="headStyle"来改变它的颜色等样式，需要改变的，不要在style样式里定义，否则代码会执行style里定义的样式

<template>
    <div class="app">
        <div class="heades" :style="headStyle" :class="{ colors: colors }">
            <img v-show="srcs == 1" src="@/assets/img/home/a.png" alt="" />
            <img v-show="srcs == 2" src="@/assets/img/home/b.png" alt="" />
        </div>
    </div></template>

二、在data当中定义

<script>
    export default {
        data () {            return{                // 导航栏样式
                headStyle: {                    background: "rgba(0, 0, 0, 0.2)",                    color: "rgba(255, 255, 255, 1)",
                },                // 导航栏图片logo
                srcs: 1,                colors: false
            }
        }
    }</script>

三、 js部分，透明度随着页面的滚动越来越深，滚动的同时导航栏的字体颜色和图片等全部切换改变

mounted() {    window.addEventListener("scroll", this.handleScroll); //监听页面滚动},methods: {    // 页面移动导航栏改变颜色
    handleScroll() {      let scrollTop =        window.pageYOffset ||        document.documentElement.scrollTop ||        document.body.scrollTop;      //设置背景颜色的透明度
      if (scrollTop) {        this.headStyle.background = `rgba(255, 255, 255,${
          scrollTop / (scrollTop + 80)
        })`;        this.headStyle.color = `rgba(0, 0, 0,${scrollTop / (scrollTop + 80)})`;        this.headStylea.background = `rgba(32,104,255,${
          scrollTop / (scrollTop + 80)
        })`;        this.headStylea.color = `rgba(255, 255, 255,${
          scrollTop / (scrollTop + 80)
        })`;        this.srcs = 2;        this.colors = true;
      } else if (scrollTop == 0) {        this.headStyle.background = "rgba(0, 0, 0, 0.2)";        this.headStyle.color = "#FFFFFF";        this.headStylea.background = `rgba(255, 255, 255, 1)`;        this.headStylea.color = `rgba(32,104,255, 1)`;        this.srcs = 1;        this.colors = false;
      }
    },
},beforeDestroy() {    window.removeEventListener("scroll", this.handleScroll);
},

四、完整代码

<template>
    <div class="app">
        <div class="heades" :style="headStyle" :class="{ colors: colors }">
            <img v-show="srcs == 1" src="@/assets/img/home/a.png" alt="" />
            <img v-show="srcs == 2" src="@/assets/img/home/b.png" alt="" />
        </div>
    </div></template><script>export default {  data() {    return {      // 导航栏样式
      headStyle: {        background: "rgba(0, 0, 0, 0.2)",        color: "rgba(255, 255, 255, 1)"
      },      srcs: 1,      colors: false
    };
  },  mounted() {    window.addEventListener("scroll", this.handleScroll); //监听页面滚动
  },  methods: {    // 页面移动导航栏改变颜色
    handleScroll() {      let scrollTop =        window.pageYOffset ||        document.documentElement.scrollTop ||        document.body.scrollTop;      //设置背景颜色的透明度
      if (scrollTop) {        this.headStyle.background = `rgba(255, 255, 255,${
          scrollTop / (scrollTop + 80)
        })`;        this.headStyle.color = `rgba(0, 0, 0,${scrollTop / (scrollTop + 80)})`;        this.headStylea.background = `rgba(32,104,255,${
          scrollTop / (scrollTop + 80)
        })`;        this.headStylea.color = `rgba(255, 255, 255,${
          scrollTop / (scrollTop + 80)
        })`;        this.srcs = 2;        this.colors = true;
      } else if (scrollTop == 0) {        this.headStyle.background = "rgba(0, 0, 0, 0.2)";        this.headStyle.color = "#FFFFFF";        this.headStylea.background = `rgba(255, 255, 255, 1)`;        this.headStylea.color = `rgba(32,104,255, 1)`;        this.srcs = 1;        this.colors = false;
      }
    }
  },  beforeDestroy() {    window.removeEventListener("scroll", this.handleScroll);
  }
}</script>