Cordova - 使用固定页眉和页脚滚动（ios）

Question

使用Cordova（phonegap）＆amp; bootstrap用于制作移动应用程序，暂时在IOS上进行测试。

使用中间可滚动内容修复的页眉和页脚栏出现问题。当点击滚动时，页眉/页脚栏随内容向下或向上移动，但一旦滚动完成，就会快速回到原位。如果我使用

-webkit-overflow-scrolling：touch;

它按预期工作，但滚动浏览内容非常尴尬，如果你滚动浏览结束，它只会滚动页眉或页脚（弹性溢出）直到你停止一秒钟。

这是我的页眉/页脚栏的HTML：

<div id="headerBar">
        <div class="container-fluid" style="background-color: #1569C7">
            <div class="row">
                <div class="col-xs-3 text-left">
                    <button id="logoutButton" type="button" class="btn btn-default">
                        Log Out
                    </button>
                    <button type="button" class="btn btn-default" id="restoreQuestionFeedButton">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                </div>
                <div class="col-xs-6 text-center" style="height: 55px">
                    <strong id="usernameText"></strong>
                </div>
                <div class="col-xs-3 text-right">
                    <button id="oldCreatQuestionButton" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
<div id="footerBar">
        <div class="container-fluid" style="padding: 0">
            <div class="row text-center">
                <button id="createQuestionButton" type="button" class="btn btn-default footerButton">
                    <span class="glyphicon glyphicon-plus"></span> <strong>Ask a new free question!</strong>
                </button>
            </div>
        </div>
    </div>

这是相关的CSS：

#headerBar {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #1569C7;
}

#footerBar {
    position: fixed;
    z-index: 100; 
    bottom: 0; 
    left: 0;
    width: 100%;
    background-color: #1569C7 !important;
}