一、大盒子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)",},// 导航栏图片logosrcs: 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>
如果觉得《页面顶部导航栏随着滚轮转动 页面下滑 导航栏背景颜色 透明度 字体 样式等改变》对你有帮助，请点赞、收藏，并留下你的观点哦！
