页面顶部导航栏随着滚轮转动，页面下滑，导航栏背景颜色，透明度，字体，样式等改变

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

by__csdn

7130人浏览 · 2021-08-27 09:38:14

by__csdn · 2021-08-27 09:38:14 发布

一、大盒子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>