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

首先声明：由于backgroundColor的值采用的是RGBA，IE8及以下不支持，所以此效果不支持IE8及以下的浏览器

此效果采用的RGBA做的透明渐变，所以CSS样式中的backgroundColor的值必须是RGBA

css代码

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

HTML代码

<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>

JS代码

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

注意：

1. 不兼容IE8及以下的IE浏览器；
2. 550是滚动条到达位置的最终透明度，此处根据需要自定义；
3. CSS终背景颜色的RGBA的A是最终透明度

demo效果