您的位置：首页 > Web前端 > JavaScript

Js控制网页滑动的时候顶部导航条变成半透明实例

2017-12-29 15:48 351 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 透明滑动滚动事件 HTML Js

相关文章推荐

新的分享

章节导航