实现一个效果：当向下滚动网页时，导航栏的背景色编程红色,京东、苏宁的首页都是这样
解决方法：监听首页滚动事件，改变背景颜色的透明度，由0到1，由于向下滚动，滚动竖直距离变大，当滚动据距离超出头部的高度，变成红色
1 监听首页滚动事件
- 在首页index下面的mounted生命周期函数中添加window.onscroll监听函数
由于头部的属性改变与读取比较多，所以设定一个变量
由于头部不随滚动变化，设在监听函数外部，提高效率 - 由于计算得到的是数值，通过+将数值转换为字符串
- 注意如何获取元素
-
如何修改元素属性
image.png
2 调整背景颜色
设置整个单页面app的背景颜色为灰色
设置底部导航栏的背景颜色为白色
去色小tip：点击左边的颜色方块，点击取色器，选区需要的颜色
