ios - Cordova - 使用固定页眉和页脚滚动 (ios)

Question

使用Cordova (phonegap) & bootstrap 制作一个移动应用程序，目前在IOS 上测试。

修复了页眉和页脚栏的问题，中间有可滚动内容。点击滚动时，页眉/页脚栏会随着内容上下移动，但在滚动完成后会立即回到原位。如果我使用

-webkit-overflow-scrolling: touch;

它按预期工作，但滚动浏览内容真的很尴尬，如果滚动到末尾，它只会滚动页眉或页脚( flex 溢出)，直到你停下来一秒钟。

这是我的页眉/页脚栏的 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;
}

Answer 1

在我的例子中，我通过删除“position: fixed”之后的“top: 0”来修复这个错误

它是固定的!