导航栏-滚动渐变 - 封装版

导航栏-滚动渐变 (已封装插件,任意调用)

样式采用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>

以上就是关于“导航栏-滚动渐变 - 封装版” 的全部内容。

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页