重新提交是问题,之前的描述没有配图不好理解,像虎扑这样的
拉动屏幕向上滚,当周四碰到上面那导航栏(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>
<p class="header"></p>
</header>
<p class="box">
<p class="content"><p class="out_box"><p style="background:#8d8d8d" class="title">星期一</p></p><p class="message">内容</p></p>
<p class="content"><p class="out_box"><p style="background:#646464" class="title">星期二</p></p><p class="message">内容</p></p>
<p class="content"><p class="out_box"><p style="background:#8d8d8d" class="title">星期三</p></p><p class="message">内容</p></p>
<p class="content"><p class="out_box"><p style="background:#646464" class="title">星期四</p></p><p class="message">内容</p></p>
<p class="content"><p class="out_box"><p style="background:#886686" class="title">星期五</p></p><p class="message">内容</p></p>
<p class="content"><p class="out_box"><p style="background:#8d8d8d" class="title">星期六</p></p><p class="message">内容</p></p>
<p class="content"><p class="out_box"><p style="background:#646464" class="title">星期日</p></p><p class="message">内容</p></p>
</p>
<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>
光阴似箭催人老,日月如移越少年。