根据滚动改变透明度显示导航

最新推荐文章于 2023-02-11 22:52:01 发布

玉林君

最新推荐文章于 2023-02-11 22:52:01 发布

阅读量998

点赞数

本文链接：https://blog.csdn.net/lin_jiejie/article/details/79182580

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿安卓透渐变导航</title>
<style>
* {
padding:0;
margin:0;
}
#header {
height:40px;
line-height:40px;
position:fixed;
width:100%;
top:0px;
left: 0;
z-index: 99;
border-bottom:1px solid #333333;
color:#000;
background: rgba(254, 180, 202, 0);
}
#main {
height:2000px;
color:#000;
background: #eeeeee;
padding-top: 60px;
}
#header ul li {
float:left;
width:25%;
text-align:center;
list-style:none;
}

</style>
</head>
<body>
<div id="header">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<div id="main">向下滚动查看效果</div>
</body>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script>
$(window).bind("scroll", function() {
var $header = $("#header");
var t = 500,
m = Math.min(document.documentElement.scrollTop || document.body.scrollTop, t) / t;
$header.css("background", "rgba(255, 255, 255, " + m + ")");
});
</script>
</html>