Javascript iScroll在滚动时向上或向下移动标题

我正在尝试构建一个函数，在向下滚动和反向滚动的同时，将标题向上移动45px。它应该像facebook header移动应用程序，或者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 -->

以下是测试链接：

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

---

谢谢你的帮助。

我几分钟就到了。它使用css和jsit，不会引起滚动问题：而且它的css效果更好：嗨，谢谢。但这并不是我真正想要的。一旦开始滚动，例如1px，标题就会开始向上或向下移动。我尝试的是将标题移动到滚动位置。当用户向下滚动30px时，标题向上移动30px。