vue实现网页中滚动鼠标时改变导航栏背景颜色

1、HTML

<div id="topBannerNav" :style="topBannerNavBg">导航栏部分
</div>

2、JS

export default {data () {return {topBannerNavBg: {backgroundColor: ''}}},mounted () {window.addEventListener('scroll', this.handleScroll) // 监听页面滚动},methods: {// 滚动页面时触发导航变色handleScroll () {let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop// 设置背景颜色的透明度if (scrollTop) {this.topBannerNavBg.backgroundColor = '#1e232f' // scrollTop + 多少根据自己的需求设置} else if (scrollTop === 0) {this.topBannerNavBg.backgroundColor = 'transparent' // 设置回到顶部时，背景颜色为透明}},// 滚动之前重置beforeDestroy () {window.removeEventListener('scroll', this.handleScroll)},}
}

vue实现网页中滚动鼠标时改变导航栏背景颜色相关推荐

VUE实现网页中滚动鼠标时导航背景颜色透明度的改变
1.HTML <div id="topNav" :style="topNavBg">这里是导航内容 </div> 2.JS export ...
安卓更改app中状态栏和底部手机导航栏背景颜色
相应的属性: 在res目录下的values文件夹中有一个styles.xml文件,它定义了一些安卓应用的布局样式,如是否显示默认的actionbar: <?xml version="1 ...
页面顶部导航栏随着滚轮转动，页面下滑，导航栏背景颜色，透明度，字体，样式等改变
一.大盒子app里有一个heades的导航栏,通过:style="headStyle"来改变它的颜色等样式,需要改变的,不要在style样式里定义,否则代码会执行style里定义的 ...
Duilib 鼠标光标放在Combox上滚动鼠标时，Combox中的值会不断变化
实际开发过程中,发现只是将鼠标光标放在Combox上时,滚动鼠标,Combox内显示的值会随鼠标的滚动不断变化,很显然这是不我们想要的效果.查看Duilib中UICombo控件源码,发现鼠标滚轮响应事 ...
网页中滚动字幕的制作
实现滑动字幕效果的标签是<marquee>,需要滑动的文字</marquee>,该标签内有许多属性, 常用属性详解: 1.Align 属性:设置字幕的对齐方式,其参数有3个,l ...
鼠标移入移出改变元素的背景颜色
鼠标移入移出改变元素的背景颜色首先:给div标签设置一个基本的样式, 让这个div元素垂直居中. 效果展示: 然后在script标签里面获取元素div, 将获取到的div赋值给div,然后输出到控 ...
andoid点击按钮(ImageButton)时改变按钮的背景图片 SelectorDemo
andoid点击按钮(ImageButton)时改变按钮的背景图片 SelectorDemo 博客分类: android android selector 改变按钮背景图片主要是用到selector ...
页面滚动到指定位置导航栏固定顶部
做一个网页时经常会用到导航栏,导航栏对于一个网站来说,地位是举足轻重的,在用到导航栏时,我们经常会用到一个效果,就是当页面滑动到一定的位置时,导航栏需要固定在页面的顶部,这是怎么实现的呢? 下面的代码 ...
如何改变对话框的背景颜色
1.如何改变对话框的背景颜色方法一:调用CWinApp类的成员函数SetDialogBkColor来实现. ---- 其中函数的第一个参数指定了背景颜色,第二个参数指定了文本颜色.下面的例子是将应用 ...

vue实现网页中滚动鼠标时改变导航栏背景颜色

vue实现网页中滚动鼠标时改变导航栏背景颜色相关推荐

最新文章

热门文章