1. 首页
  2. 笔记

随滚动距离改变顶部区域的背景色渐变

随滚动距离改变顶部区域的背景色渐变
1、需求分析:滚动距离在轮播图高度范围内时,实现顶部搜索部位的背景色渐变
思路:计算出当前滚动条滚动到的距离的透明度的值

  1. 获取当前滚动条滚动的距离
  2. 获取当前轮播图的高度
  3. 计算:透明度 = 距离  /  高度
  4. 把计算好的透明度值,设置背景色的 rgba里的最后一个值改为透明度值
  5. 滚动的距离小于轮播图高度的情况下除以轮播图高度会小于1,所以此时设置透明度值有渐变效果,当滚动出去的距离大于轮播图高度时,此时除以轮播图高度就会大于1,透明度的值在0-1之间,所以:当透明度值大于1时,直接设置背景色透明度值为1即可。

随滚动距离改变顶部区域的背景色渐变

 
 

联系我们

咨    询:点击这里给我发消息

邮    箱:cyt_web@163.com

小程序:AI前端