<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>固定导航栏</title>
<script type="text/javascript" src="https://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<style>
*{ padding:0px; margin:0px;}
.big{ width:100%;height:4000px; background:pink; margin:0 auto; overflow:hidden;}
.sub{ width:100%;height:100px; background:yellow; }
.fixed{ width:100%; height:80px; background:#F66; text-align:center; top:0px;}
</style>
</head>
<body>
<div class="big">
<div class="sub">
图片区
</div>
<div class="fixed">我是固定的哟</div>
我是最大的div
</div>
</body>
</html>
<script>
$(document).ready(function(e) {
t = $('.fixed').offset().top;//获取匹配元素在当前视口的相对偏移 .offset().top：获得位移高度
mh = $('.big').height();
fh = $('.fixed').height();
$(window).scroll(function(e){
s = $(document).scrollTop();
if(s > t - 10){
$('.fixed').css('position','fixed');
if(s + fh > mh){
$('.fixed').css('top',mh-s-fh+'px');
}
}else{
$('.fixed').css('position','');
}
})
});
</script>
