<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>透渐变导航</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
padding:0;
margin:0;
}
body {
margin-top:40px;
}
#header {
height:40px;
line-height:40px;
position:fixed;
width:100%;
top:0px;
border-bottom:1px solid red;
color:#000;
}
#main {
height:2000px;
color:#000;
}
#header ul li {
float:left;
width:100%;
text-align:center;
list-style:none;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>我是渐变导航</li>
</ul>
</div>
<div id="main">向下滚动查看效果</div>
<script>
$(window).bind("scroll", function() {
var $header = $("#header");
var t = 200,
m = Math.min(document.documentElement.scrollTop || document.body.scrollTop, t) / t;
$header.css("background", "rgba(254, 192, 213, " + m + ")");
});
</script>
</body>
<html>
<head>
<meta charset="utf-8">
<title>透渐变导航</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
padding:0;
margin:0;
}
body {
margin-top:40px;
}
#header {
height:40px;
line-height:40px;
position:fixed;
width:100%;
top:0px;
border-bottom:1px solid red;
color:#000;
}
#main {
height:2000px;
color:#000;
}
#header ul li {
float:left;
width:100%;
text-align:center;
list-style:none;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>我是渐变导航</li>
</ul>
</div>
<div id="main">向下滚动查看效果</div>
<script>
$(window).bind("scroll", function() {
var $header = $("#header");
var t = 200,
m = Math.min(document.documentElement.scrollTop || document.body.scrollTop, t) / t;
$header.css("background", "rgba(254, 192, 213, " + m + ")");
});
</script>
</body>
</html>
