重新提交是问题，之前的描述没有配图不好理解，像虎扑这样的
拉动屏幕向上滚，当周四碰到上面那导航栏(nba 中国篮球)
的时候就浮在它下面，然后拉到周五的话周五就浮到导航栏下面，以次拉周六，周日也是一样
我解决了向上滚的效果，现在是向下滚，怎么让脱离文档流的这些title回到原来位置
要怎么计算????
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>z
body,html{margin:0;padding:0;width:640px;margin:0 auto;}
.box{width:640px;margin:0 auto;overflow:hidden;}
.content .title{max-width:640px;height:50px;overflow:hidden;text-align:center;line-height:50px;}
.content .message{width:100%;height:300px;line-height:200px;text-align:center;}
header{width:640px;height:100px;margin:0 auto;overflow:hidden;}
.header{position:fixed;width:640px;height:100px;background:#954351;}
.out_content{height:50px;width:100%;overflow:hidden;}
.navFix { position: fixed;z-index: 5555;width:640px;overflow:hidden;left:50%;margin-left:-320px;}
.message{border:1px solid #333;box-sizing: border-box;}
</style>
</head>
<body>
<header>
<div class="header"></div>
</header>
<div class="box">
<div class="content"><div class="out_box"><div style="background:#8d8d8d" class="title">星期一</div></div><div class="message">内容</div></div>
<div class="content"><div class="out_box"><div style="background:#646464" class="title">星期二</div></div><div class="message">内容</div></div>
<div class="content"><div class="out_box"><div style="background:#8d8d8d" class="title">星期三</div></div><div class="message">内容</div></div>
<div class="content"><div class="out_box"><div style="background:#646464" class="title">星期四</div></div><div class="message">内容</div></div>
<div class="content"><div class="out_box"><div style="background:#886686" class="title">星期五</div></div><div class="message">内容</div></div>
<div class="content"><div class="out_box"><div style="background:#8d8d8d" class="title">星期六</div></div><div class="message">内容</div></div>
<div class="content"><div class="out_box"><div style="background:#646464" class="title">星期日</div></div><div class="message">内容</div></div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
var _scrollobj = $('.out_box');
var _navbanner = $('.header');
$(window).scroll(function(){
var _windowscrollTop = $(this).scrollTop();
_scrollobj.each(function(){
var _this = $(this);
var _objscrollTop = _this.offset().top;
var _bannerH = (_navbanner.length > 0) ? _navbanner.height() : 0;
if(_windowscrollTop > (_objscrollTop - _bannerH)){
_this.children().addClass('navFix').css('top',_bannerH);
}else{
_this.children().removeClass('navFix');
}
})
})
});
</script>
</body>
</html> $(function() {
var _scrollobj = $('.out_box');
var _navbanner = $('.header');
$(window).scroll(function(){
var _windowscrollTop = $(this).scrollTop();
_scrollobj.each(function(){
var _this = $(this);
var _objscrollTop = _this.offset().top;
var _bannerH = (_navbanner.length > 0) ? _navbanner.height() : 0;
if(_windowscrollTop > (_objscrollTop - _bannerH)){
_this.children().addClass('navFix').css('top',_bannerH);
} else {
_this.children().removeClass('navFix');
}
})
})
});