0

我注意到即使在 iOS 上，Bootstrap 也能通过定位navbar保持在窗口的顶部fixed。尽管我认为如果不重新实现 iOS 滚动就不可能做到这一点？

我想知道这是如何工作的，以及如何根据自己的观点来做？我尝试过的任何方法似乎都不起作用 - div 在滚动时未对齐，并且仅在滚动结束后才跳入位置。

编辑：这是一个最小的（ish！）示例。了解在 iOS 上fixedThing向下滚动时如何向上跳跃。也许这与与navbar?

<html>
    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            @import url('http://getbootstrap.com/dist/css/bootstrap.css');

            .fixedThing {
                position: fixed;
                width: 100%;
                height: 100%;
                background: red;
                opacity: 0.5;
            }

            .navbar {
                width: 100%;
            }
        </style>

        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

    </head>
    <body>

        <div class="navbar navbar-inverse navbar-fixed-top">

        </div>

        <div class="fixedThing"></div>

        <p>...insert lots of page content so it scrolls ...</p>

    </body>
</html>

http://jsfiddle.net/D5cZj/

4

1 回答 1

2

由于支持 iOS 5 position: fixed： http: //caniuse.com/#search=fixed

如果您需要进一步的帮助，您必须向我们展示您已经尝试过的内容。

编辑：

问题是，首先你移动整个页面，直到浏览器导航栏不再可见，然后你开始移动段落中的内容。

为防止出现此问题，您可以尝试window.scrollTo(0, 1); 如何在 iPhone / HTML5 中完全隐藏导航栏

但是当用户滚动到顶部（因此导航栏可见）然后再向下滚动时，问题会再次出现。

编辑2：

如果您将 CSS 更改为：

body {
    height: 100%;
    overflow: scroll;
}

.fixedThing {
    position: fixed;
    width: 100%;
    height: 150%;
    background: red;
    opacity: 0.5;
}

.navbar {
    width: 100%;
}

它会改善这个问题。

于 2013-08-11T13:44:53.557 回答