Bootstrap 如何在 iOS 上为导航栏使用固定定位？答案

【问题标题】：How does Bootstrap manage to use fixed positioning for navbar on iOS?Bootstrap 如何在 iOS 上为导航栏使用固定定位？
【发布时间】：2013-08-12 20:11:02
【问题描述】：

我注意到，即使在 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/

【问题讨论】：

你运行的是什么版本的 iOS？
我的物理 iPhone 上的 6.x 和 iPhone 模拟器上的各种（通常是 5.x）。

标签： html css twitter-bootstrap mobile-safari css-position

【解决方案1】：

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

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

编辑：

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

为了防止这个问题你可以试试window.scrollTo(0, 1); How to completely hide the navigation bar in iPhone / HTML5

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

编辑 2：

如果您将 css 更改为：

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

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

.navbar {
    width: 100%;
}

这会改善问题。

【讨论】：

好的，在原帖中添加示例！
谢谢，我本来打算实现 URL 栏隐藏的东西，谢谢你的链接！我想出了相同的解决方案，也只是简单地延长高度……有点难看，但大部分都有效。我仍然不明白 bootstrap 的导航栏是如何完美运行的......？！
嗯，问题不在于定位，而在于高度。您的元素的高度为 100%，但浏览器的高度会在导航栏消失时发生变化。