导航栏-滚动渐变 （已封装插件，任意调用）
样式采用mui框架的样式（无须在意）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="static.docs.v1.1/plugins/mui/css/mui.min.css">
<style>
</style>
</head>
<body>
<header id="header" class="mui-bar mui-bar-transparent" style="background-color: rgba(255, 255, 255, 0);">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">导航栏</h1>
</header>
<div class="mui-content" style="height: 2000px;">
</div>
<script src="static.docs.v1.1/js/jquery.min.3.1.0.js"></script>
<script type="text/javascript">
var mui_bar_transparent = $(".mui-bar-transparent").css("backgroundColor");
$(window).scroll(function() {
winScroll();
});
function winScroll(){
var setY = 50; //50px
var y = $(window).scrollTop();
var percentY = y/setY;
// console.log(y+' / '+percentY);
if(y>setY){
return false;
} else {
var obj = rgbOrRgbaToArray(mui_bar_transparent);
var str = 'rgba('+obj[0]+','+obj[1]+','+obj[2]+','+percentY+')';
// console.log(str);
// 实时重置
$(".mui-bar-transparent").css("backgroundColor",str);
}
}
function rgbOrRgbaToArray(colorString){
var rgbOrgbaJudgeTag = /^([^\(]+)\([^\)]+\)$/i;
var aaa = rgbOrgbaJudgeTag.exec(colorString);
if(aaa!==null){
if(aaa[1].trim()==="rgb"){
var str = colorString;
var strTag = /^rgb[a]*\s*\(([^,]+),([^,]+),([^\)]+)\)$/i;
var result = strTag.exec(str);
if ( result===null || result[1].trim()==="" || result[2].trim()==="" || result[3].trim()==="" ) {
return null;
}
var returnArray = [];
for(var i=1;i<=result.length-1;i++){
returnArray[i-1]=Number(result[i].trim());
}
return returnArray;
} else if (aaa[1].trim()==="rgba") {
var str = colorString;
var strTag = /^rgb[a]*\s*\(([^,]+),([^,]+),([^,]+),([^\)]+)\)$/i;
var result = strTag.exec(str);
if ( result===null || result[1].trim()==="" || result[2].trim()==="" || result[3].trim()==="" ) {
return null;
}
var returnArray = [];
for(var i=1;i<=result.length-1;i++){
returnArray[i-1]=Number(result[i].trim());
}
return returnArray;
} else {
return null;
}
} else {
return null;
}
}
</script>
</body>
</html>
以上就是关于“导航栏-滚动渐变 - 封装版” 的全部内容。