下面通过本文给大家分享基于原生js实现 mui导航栏透明渐变效果，具体内容详情如下所示：
首先声明：由于backgroundcolor的值采用的是rgba，ie8及以下不支持，所以此效果不支持ie8及以下的浏览器
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 p:first-child img{margin-top: 0;} .module-content p img{ display: block; width: 100%; margin-top: 10px; }
html代码
<header class="module-layer"> <p class="module-layer-content"> <p class="layer-return"></p> <h1 class="layer-head-name"> <p class="pr search-box"> <img class="shop-search" src="images/search.png"/> <input id="shop-input" type="text" placeholder="搜索店内商品" value="" /> </p> </h1> <p class="layer-share"></p> </p> </header> <p class="module-content"> <p><img src="images/banner.png"/></p> <p><img src="images/banner1.png"/></p> <p><img src="images/banner3.png"/></p> <p><img src="images/banner4.jpg"/></p> <p><img src="images/banner5.png"/></p> <p><img src="images/banner6.png"/></p> <p><img src="images/banner7.jpg"/></p> <p><img src="images/banner8.jpg"/></p> </p>
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); }())
注意：
不兼容ie8及以下的ie浏览器；
550是滚动条到达位置的最终透明度，此处根据需要自定义；
css终背景颜色的rgba的a是最终透明度
相关推荐：
javascript实现精美个性导航栏筋斗云效果的示例代码
如何实现导航栏链接点击后跳转，新页面相应的链接添加颜色
css制作立体导航栏的实现方法介绍
以上就是js实现 mui导航栏透明渐变效果的详细内容。