页面上下滚动_scroll
慕容星晖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jq_3.3.1_mi.js"></script>
<style>
body{margin: 0 ;padding: 0; color: red;text-align: center}
.nav{width: 100%;height: 50px;background-color: cyan;position: fixed;top: 0}
.nav2{background-color: red}
.banner{width: 80%;height:200px;background-color:darkblue;;margin: 0 auto;margin-top: 50px}
.content{width: 90%;height:1000px;background-color: darkgrey;;margin: 0 auto}
</style>
</head>
<body>
<div class="nav">nav</div>
<div class="banner">banner</div>
<div class="content">content</div>
<script>
$(function(){//JQ就绪函数 写法 固定
$(window).scroll(function(){//滚动事件
//scrollTop 获取window下拉距离顶部的高度
var top=$(window).scrollTop();
if(top>0){
$('.nav').css('display','none');
}else{
$('.nav').css('display','block');
}
if(top>250){
$('.nav').addClass('nav2').css({'display':'block','color':'#fff'});
}else{
$('.nav').removeClass('nav2');//清除掉增加的class类
}
});
})
</script>
</body>
</html>
类似资料：