11-首页导航渐变

实现一个效果：当向下滚动网页时，导航栏的背景色编程红色,京东、苏宁的首页都是这样

解决方法：监听首页滚动事件，改变背景颜色的透明度，由0到1，由于向下滚动，滚动竖直距离变大，当滚动据距离超出头部的高度，变成红色

1 监听首页滚动事件

• 在首页index下面的mounted生命周期函数中添加window.onscroll监听函数
  由于头部的属性改变与读取比较多，所以设定一个变量
  由于头部不随滚动变化，设在监听函数外部，提高效率
• 由于计算得到的是数值，通过+将数值转换为字符串
• 注意如何获取元素

• 如何修改元素属性

  
  image.png

2 调整背景颜色

设置整个单页面app的背景颜色为灰色
设置底部导航栏的背景颜色为白色

去色小tip：点击左边的颜色方块，点击取色器，选区需要的颜色