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

body,p,h1{margin: 0;}.module-layer{  width: 100%;  position: fixed;  top: 0;  left: 0;  z-index: 100000;}.module-layer-content{  position: relative;  min-width: 320px;  max-width: 750px;  width: 100%;  margin: 0 auto;  background-color: rgba(255, 0, 0, 0.9);}.module-layer-bg{  width: 100%;  height: 100%;  background: #000;  opacity: .7;  position: absolute;  top: 0;  left: 0;  z-index: -1;}.layer-head-name{  height: 50px;  line-height: 50px;  text-align: center;  padding: 0 50px;  font-size: 20px;}.layer-return,.layer-share{  width: 50px;  height: 50px;  line-height: 50px;  text-align: center;  position: absolute;  top:0;  z-index: 1;}.layer-return{left: 0;}.layer-share{right: 0;}.fixed-layer{  height: 100%;  display: none;  z-index: 100001;}.relative-layer{height: 100%;}.layer-content{  padding:3%;  position: relative;  top: 20%;}.layer-close{  width: 2rem;  height: 2rem;  position: absolute;  top:3%;  right: 3%;}.pr {  position:relative;}#shop-input::-webkit-input-placeholder {  color:#fff;}#shop-input:-moz-placeholder {  color:#fff;}#shop-input::-moz-placeholder {  color:#fff;}#shop-input:-ms-input-placeholder {  color:#fff;}#shop-input {  border:none;  outline:none;  background:transparent;}.search-box {  height:30px;  border-radius:20px;  top:10px;  overflow:hidden;  z-index:10;}.search-box:after {  content:'';  display:block;  width:100%;  height:30px;  background:#fff;  opacity:.5;  position:absolute;  top:0;  left:0px;  z-index:-1;}#shop-input {  height:28px;  line-height:28px;  font-size:16px;  position:absolute;  top:0;  left:30px;}.shop-search {  width:16px;  height:16px;  position:absolute;  top:7px;  left:6px;}.layer-return{  background: url(images/return.png) no-repeat center center/12px 20px;}.layer-share{  background: url(images/share.png) no-repeat center center/20px 30px;}a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none;}.module-content{  min-width: 320px;  max-width: 750px;  width: 100%;  margin: 0 auto;  background: #fff;}.module-content div:first-child img{margin-top: 0;}.module-content div img{  display: block;  width: 100%;  margin-top: 10px;}

<header class="module-layer">  <div class="module-layer-content">    <p class="layer-return"></p>    <h1 class="layer-head-name">      <div class="pr search-box">        <img class="shop-search" src="images/search.png"/>        <input id="shop-input" type="text" placeholder="搜索店内商品" value="" />      </div>    </h1>    <p class="layer-share"></p>  </div></header><div class="module-content">  <div><img src="images/banner.png"/></div>   <div><img src="images/banner1.png"/></div>   <div><img src="images/banner3.png"/></div>  <div><img src="images/banner4.jpg"/></div>  <div><img src="images/banner5.png"/></div>  <div><img src="images/banner6.png"/></div>  <div><img src="images/banner7.jpg"/></div>  <div><img src="images/banner8.jpg"/></div></div>

(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);}())