Question

我遇到twitter-bootstrap-3中固定导航栏的问题，我无法找到解释或解决方案。

当我滚过页面顶部时，不同的浏览器会有不同的行为：

在Chrome（MacOS）中，整个内容向下滚动，如下所示：

在Safari（也是Mac）中，导航栏固定在顶部，背景显示在它下面：

理想情况下，我更喜欢Chrome中的行为。我使用overflow，position尝试了css的多种方法，但我无法弄明白。我可以用CSS（或者Javascript / jQuery吗？）

来纠正这种行为

这里是我的代码的基础（!important只是为了覆盖Bootstrap样式）：

＆＃13;

body {
    background-color: #eee !important;
    padding-top: 54px !important;
}

.navbar {
    min-height: 54px !important;
    border-bottom: 2px solid orange !important;
    margin-bottom: 0 !important;
}

.navbar-default {
    background: #fff !important;
    .navbar-brand {
        color: #000 !important;
    }
}

.usp-bar {
    background-color: orange;
    color: #fff;
    height: 30px;
    width: 100%;
}

.content {
  height: 800px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>

  <div id="app">

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    Navbar
                </a>
            </div>
        </div>
    </nav>

    <div class="usp-bar">
      orange bar
    </div>

    <div class="content">
      Content
    </div>

  </div>
</body>

＆＃13;

Answer 1

<强>黑客

请参阅puresamari的要点＆＃34; overscroll background-color on ios＆＃34;将fixed容器放在页面上方的负空间中。无法在Safari 11或移动版Safari中使用。

<强>反弹时-行为

Chrome 63引入了overscroll-behavior属性，可让您完全禁用滚动链接或过度滚动。但是，Safari仍然不支持

最终建议

最可靠的方法是在html上设置背景颜色，在body上设置另一种颜色，即http://peter.coffee/htmls-background-color。

目前还无法控制浏览器过度滚动的方式，因此请设置正确的颜色，并在固定标题的页面顶部留下负空格。

有趣的是StackOverflow的作用：

.top-bar {
    height: 50px;
}

.top-bar._fixed {
    position: fixed;
    min-width: auto;
}

.top-bar ~ .container, .top-bar ~ #announcement-banner {
    margin-top: 50px;
}

使用固定导航栏滚动浏览顶部在不同浏览器中的行为方式不同

1 个答案: