滚动时，iScroll向上或向下移动标题

Question

我正在尝试构建一个函数，在向下和向后滚动时向上移动标题45px。它应该像facebook标题移动应用程序，或Chrome移动浏览器或safari移动浏览器的地址栏。 我正在使用滚动iScroll插件，我设法让标题向上移动，同时向下滚动并向上移动同时向上滚动。 但有时它不起作用。它在滚动时卡住了。

这是我的JS代码：

function updatePosition () {
        var wrapperPosition         = this.y;
        var lastStopPosition        = $('#header').attr('data-last-value');
        var distance                = wrapperPosition - lastStopPosition;

        var getMatrixStyle          = window.getComputedStyle($('#header').get(0));
        var getMatrix               = new WebKitCSSMatrix(getMatrixStyle.webkitTransform);
        var matrixPositionHeader    = getMatrix.m42;

        var moveUp                  = matrixPositionHeader - 1;
        var moveDown                = matrixPositionHeader + 1;

        if(wrapperPosition >= -45 && wrapperPosition <= 0 && distance < 0) {
            $('#header').css({ '-webkit-transform' : 'translate(0,' + wrapperPosition + 'px)' });
        } 
        else if(wrapperPosition <= -46 && distance < 0) {
            $('#header').css({ '-webkit-transform' : 'translate(0,-45px)' });
        } 
        else if(wrapperPosition <= -46 && distance > 0) {
            if(matrixPositionHeader <= -1){
                $('#header').css({ '-webkit-transform' : 'translate(0,' + moveDown + 'px)' });
            } 
            else if(matrixPositionHeader == 0){
                $('#header').removeAttr('style');
            }
        } 
        else if(distance > 0 && distance <= 45){
            if(matrixPositionHeader <= -1){
                $('#header').css({ '-webkit-transform' : 'translate(0,' + moveDown + 'px)' });
            } 
            else if(matrixPositionHeader == 0){
                $('#header').removeAttr('style');
            }
        }

        writeposition.innerHTML     = this.y>>0;
        writeposition3.innerHTML    = distance;
    }

    function scrollStart() {
        var getMatrixStyle          = window.getComputedStyle($('#innerwrapper').get(0));
        var getMatrix               = new WebKitCSSMatrix(getMatrixStyle.webkitTransform);
        var matrixPositionWrapper   = getMatrix.m42;

        writeposition2.innerHTML    = matrixPositionWrapper;
    }

    function scrollEnd() {
        var getMatrixStyle          = window.getComputedStyle($('#innerwrapper').get(0));
        var getMatrix               = new WebKitCSSMatrix(getMatrixStyle.webkitTransform);
        var matrixPositionWrapper   = getMatrix.m42;

        $('#header').attr('data-last-value', matrixPositionWrapper);

        writeposition4.innerHTML    = matrixPositionWrapper;
    }

    function loaded () {
        var myScroll;
        writeposition = document.getElementById('position');
        writeposition2 = document.getElementById('position2');
        writeposition3 = document.getElementById('position3');
        writeposition4 = document.getElementById('position4');

        myScroll = new IScroll('#wrapper', { 
                                             probeType: 3, 
                                             mouseWheel: true,
                                             speedRatioY: 40
                                            });

        myScroll.on('scrollStart', scrollStart);
        myScroll.on('scroll', updatePosition);
        myScroll.on('scrollEnd', scrollEnd);
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

我的HTML：

<div style="position:absolute; top: 110px;z-index:100; left: 120px;">Innerwrapper Y position: <strong id="position">0</strong> px</div>
    <div style="position:absolute; top: 130px;z-index:100; left: 120px;">Start position: <strong id="position2">0</strong> px</div>
    <div style="position:absolute; top: 150px;z-index:100; left: 120px;">Distance betweent start/stop position: <strong id="position3">0</strong> px</div>
    <div style="position:absolute; top: 170px;z-index:100; left: 120px;">Last stop position: <strong id="position4">0</strong> px</div>
    <header id="header" role="banner" data-last-value="0">
        <div class="header-main"></div>
        <!-- end header main --> 
        <div class="header-bar"></div>
        <!-- end header bar -->
    </header>
    <!-- end header -->

    <div id="wrapper">

        <div id="innerwrapper">
            <ul>
                <li>Content</li>
                .....
            </ul>
        </div>
        <!-- end inner wrapper -->
    </div>
    <!-- end wrapper -->

以下是测试链接：http://jsfiddle.net/bP9hy/1/

要查看问题，请尝试向上和向下滚动几次，但要停止在其间滚动（例如，向下滚动120px并停止。然后再向上滚动。）

感谢您的帮助。