<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top, .nav {
width: 1423px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 10px auto;
}
img {
display: block;
vertical-align: middle;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//思路:给页面设置一个滚动事件,时刻监视页面的scrollTop的值,
// 如果这个值大于第一部分的高度,就设置第二部分为固定定位.
// 如果这个值小于第一部分的高度,就设置第二部分的定位还原.
//获取第一部分的高度.
var topHeight = $('.top').height();
//获取第二部分的高度.
var navHeight = $('.nav').height();
//给页面设置一个滚动事件.
$(window).on('scroll', function () {
//时刻监视页面的scrollTop的值
var scrollTopValue = $(this).scrollTop();
//判断,如果这个滚动的值大于第一部分的高度.就让第二部分固定定位.
if(scrollTopValue > topHeight){
$('.nav').css({
position:'fixed',
top:0,
left:0
});
//给第三部分设置margin-top的值为第二部分的高度.
$('.main').css({
marginTop:navHeight+10
});
}else {
//还原
$('.nav').css({
position:'static',
top:0,
left:0
});
//marginTop的值也还原
$('.main').css({
marginTop:10
});
}
});
});
</script>
</head>
<body>
<div class="top">
<img src="images/top.png"/>
</div>
<div class="nav">
<img src="images/nav.png"/>
</div>
<div class="main">
<img src="images/main.png"/>
</div>
</body>
</html>
扫一扫
1093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
