<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
height: 100px;
width: 100%;
background-color: #008000;
}
.top{
height: 200px;
width: 100%;
background-color: #FF0000;
}
</style>
<script src="js/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $index =$(".nav").offset().top;//offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
$(window).on("scroll",function(){
var $scrollTop = $(window).scrollTop(); //捕获滚动条移动的数值
if ($scrollTop >= $index) {
// 聚顶效果
$(".nav").css({"position":"fixed","top":"0"});
} else{
//恢复时
$(".nav").css({"position":"static"});
}
});
});
</script>
</head>
<body>
<div style="height: 2000px;width: 100%;background: yellow;">
<div class="top">
</div>
<div class="nav">
</div>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
