<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入jQuery-->
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
<title>Js控制网页滑动的时候顶部导航条变成半透明</title>
<style type="text/css">
.main{
width:100%;
height:2000px;
background:gray;
}
.nav{
width:100%;
height:100px;
background:black;
position:fixed;
top:0;
}
.content{
position: f;
top: 0;
right: 0;
left: 0;
bottom: 2.5rem;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="main"></div>
<script>
function _scroll(){
var scrollTop =$(window).scrollTop();
if(scrollTop<10){
$(‘.nav‘).css(‘opacity‘,1);
}else{
$(‘.nav‘).css(‘opacity‘,0.1);
}
}
$(window).on(‘scroll‘,function() {
_scroll()
});
</script>
</body>
</html>
来自微信公众号:编程社
程序员日常进阶宝典，欢迎关注！
原文地址：https://www.cnblogs.com/ai10999/p/11449325.html
时间： 2024-10-08 17:41:06