Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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{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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers