原生JS实现 MUI导航栏透明渐变效果(2)

(function(){
  //获取滚动条当前位置
  function getScrollTop(){ 
  　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; 
  　　if(document.body){ 
  　　　　bodyScrollTop = document.body.scrollTop; 
  　　} 
  　　if(document.documentElement){ 
  　　　　documentScrollTop = document.documentElement.scrollTop; 
  　　} 
  　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; 
  　　return scrollTop; 
  }
  //获取CSS样式
  function getStyle(element, attr){
    if(element.currentStyle){
      return element.currentStyle[attr];
    }else{
      return window.getComputedStyle(element,null)[attr];
    }
  }
  //获取原始backgroundColor值
  var color = getStyle(document.getElementsByClassName('module-layer-content')[0],'backgroundColor');
  //取到RGB
  var colorRgb = color.substring(0,color.lastIndexOf(',') + 1);
  //取到A
  var colorA = color.substring(color.lastIndexOf(',') + 1,color.length - 1);
  //对A判断，如果最终值小于0.9，直接设置为1
  if(colorA < 0.9){colorA = 1;}
  //设置背景色的A的函数
  var setCoverOpacity = function() {
    document.getElementsByClassName('module-layer-content')[0].style.background = colorRgb + (((getScrollTop() / 550) > colorA) ? colorA : (getScrollTop() / 550)) + ')';
  }
  //初始化函数
  setCoverOpacity();
  //绑定滚动监听事件
  window.addEventListener('scroll',setCoverOpacity,false);
}())