一个jquery效果

我重新改下之前的描述，配个图，像虎扑这样的
拉动屏幕向上滚，当周四碰到上面那导航栏(nba 中国篮球)
的时候就浮在它下面，然后拉到周五的话周五就浮到导航栏下面
往下拉的时候又逐个回到原来的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,html{margin:0;padding:0;width:640px;margin:0 auto;}
       .box{width:640px;margin:0 auto;overflow:hidden;}
       .content .title{width:100%;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; top: 0;z-index: 5555;width:640px;}
       .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 = $('.title');
            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.addClass('navFix').css('top',_bannerH);
                    }
                    
                })    
            })
            
        });
    </script>
</body>
</html>

请问问题解决了吗？

没懂你的意思，你是想要什么效果？

【热门文章】