11-首页导航渐变

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

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

1 监听首页滚动事件

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


    11-首页导航渐变_第1张图片
    image.png

2 调整背景颜色

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

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

你可能感兴趣的:(11-首页导航渐变)