Iscroll headline snap on top

Iscroll headline snap on top

by secretgspot

HTML

<script src="https://raw.github.com/cubiq/iscroll/master/src/iscroll.js"></script>
<div id="iphonewrap">
    <div id="clonebox"></div>
    <div id="scroll">
        <ul id="content">
            <li>
                <div class="header"></div>
                <div class="body">other</div>
            </li>
            <li>
                <div class="header header1">head1</div>
                <div class="body">body1</div>
            </li>
            <li>
                <div class="header  header2">head2</div>
                <div class="body">body2</div>
            </li>     
        </ul>
    </div>
</div>

CSS

#clonebox {
    position : absolute;
    top      : 60px;
    left     : 10px;
    right    : 0;
    z-index  : 10;
    width: 200px;
    height: 40px;
}

#scroll{
    position: absolute;
    height: 300px;
    width: 200px;
    top: 60px;
    right: 10px;
    bottom: 60px:
    left: 10px;
    background: rgba(245,245,245,1);
}

#content{
    min-height: 100%;
    width: 200px; 
    background: rgba(224,225,234,1);
}

.header{
    width: 200px;
    height: 30px;
    text-align: center;
    padding-top: 10px;
}

.header1{
    background: grey;
    width: 198px;
    border: 1px solid white;
}

.header2{
   background: rgba(234,235,244,1);
   width: 198px;
   border: 1px solid white;
}

.body{
    width: 198px;
    height: 300px;
    border-left: 1px solid white;
    border-right: 1px solid white;
    text-align: center;
    padding-top: 50px;
}

body{
    background: rgba(234,234,234,1);
    font-family: sans-serif;
    color: rgba(34,34,34,0.7);
}

#iphonewrap{
    position: absolute;
    height: 420px;
    width: 220px;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -210px;
    background: black;
    border-radius: 20px;
    border: 1px solid gray;
}

JavaScript

var scroller = new iScroll('scroll', {
    hScroll:false, 
    hScrollbar:false, 
    vScrollbar:false, 
    onScrollStart: function(){updateHeaders()},
    onScrollEnd: function(){endUpdate()}     
}),
    $headers = $('.header'),
    prefix   = $('#content')[0].style[0].replace('transition-property', ''),
    scrollTop = 0,
    oHeaders = [],
    headerState = [],
    setHeaders = function () {
        $headers.each(function (index, obj){
            oHeaders[index] = $(this).position().top;
            for (var i = 0; i < oHeaders.length; i++) {
                if(oHeaders[i] + $('#content').position().top <= 0){
                    headerState[i] = false;
                }else{
                    headerState[i] = true; 
                }
             }
        });
        console.log('oHeaders', oHeaders);
        console.log('headerState', headerState);
    },
    updateHeaders = function(){
        window.updateHeaderJob = setInterval(function(){
            for (var i = 0; i < oHeaders.length; i++) {
                if(oHeaders[i] + $('#content').position().top <= 0){
                    newState = false;
                }else{
                    newState = true; 
                }
                if(headerState[i] != newState){
                    headerState[i] = newState;
                    if(headerState[i]){
                        var set = i- 1;
                        if(set<0){set=0;}
                        $('#clonebox').html($headers.eq(set).clone());
                    }else{
                        var set = i;
                        $('#clonebox').html($headers.eq(set).clone());
                    }
                }
            }
        },50);
    },
    endUpdate = function(){
        clearInterval(updateHeaderJob);
    };

    setHeaders();