微客导航 » 文章资讯 » 原生JS实现 MUI导航栏透明渐变效果

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

2023-09-21 10:35:05 318

mui内置有H5版本的透明渐变导航控件，教程参考mui官网；透明渐变导航是一种解决滚动条通顶的变通方案，相比双webview，具有更高的性能和更好的动画效果；

下面通过本文给大家分享基于原生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:0auto;
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:050px;
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-repeatcentercenter/12px20px;
}
.layer-share{
background:url(images/share.png)no-repeatcentercenter/20px30px;
}
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:0auto;
background:#fff;
}
.module-contentdiv:first-childimg{margin-top:0;}
.module-contentdivimg{
display:block;
width:100%;
margin-top:10px;
}

HTML代码

JS代码

(function(){
//获取滚动条当前位置
functiongetScrollTop(){
varscrollTop=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;
returnscrollTop;
}
//获取CSS样式
functiongetStyle(element,attr){
if(element.currentStyle){
returnelement.currentStyle[attr];
}else{
returnwindow.getComputedStyle(element,null)[attr];
}
}
//获取原始backgroundColor值
varcolor=getStyle(document.getElementsByClassName('module-layer-content')[0],'backgroundColor');
//取到RGB
varcolorRgb=color.substring(0,color.lastIndexOf(',')+1);
//取到A
varcolorA=color.substring(color.lastIndexOf(',')+1,color.length-1);
//对A判断，如果最终值小于0.9，直接设置为1
if(colorA<0.9){colorA=1;}
//设置背景色的A的函数
varsetCoverOpacity=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是最终透明度

总结

以上所述是小编给大家介绍的原生JS实现MUI导航栏透明渐变效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐