页面顶部导航栏随着滚轮转动，页面下滑，导航栏背景颜色，透明度，字体，样式等改变 |
您所在的位置：网站首页 › 自制地铁图生成器免费下载 › 页面顶部导航栏随着滚轮转动，页面下滑，导航栏背景颜色，透明度，字体，样式等改变 |
|
一、大盒子app里有一个heades的导航栏，通过:style="headStyle"来改变它的颜色等样式，需要改变的，不要在style样式里定义，否则代码会执行style里定义的样式 二、在data当中定义 export default { data () { return{ // 导航栏样式 headStyle: { background: "rgba(0, 0, 0, 0.2)", color: "rgba(255, 255, 255, 1)", }, // 导航栏图片logo srcs: 1, colors: false } } }三、 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); },四、完整代码 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); } } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |