为什么我的 .sticky-top 类在 Bootstrap 4 中不起作用？答案

【问题标题】：Why is my .sticky-top class not working in Bootstrap 4?为什么我的 .sticky-top 类在 Bootstrap 4 中不起作用？
【发布时间】：2019-03-05 22:29:38
【问题描述】：

我是 Bootstrap 的新手，正在尝试制作响应式菜单。由于某种原因，粘顶不起作用。我的浏览器确实支持它，并且将我的代码与其他工作版本进行比较，我只是看不出它为什么不工作。我正在使用引导程序 4.1.3。

这是我的代码；我不知道与sticky-top有任何可能的碰撞。

h1,h2,h3,h4,p,ul,ol,li,body {
    margin: 0;
    padding: 0;
}
a {
    transition: all 0.3s ease-out;
}
a:hover { 
    transition: all 0.3s ease-out;
}
.container {
    margin: auto;
}
.clearfix:after, .clearfix:before {
    content: "";
    display: block;
    clear: both;
}
*, *:after, *:before {
    box-sizing: border-box;
}
@media screen and (max-width: 479px) {
.container {width: 92%}
}
@media screen and (min-width: 480px) {
.container {width: 95%}
}
@media screen and (min-width: 740px) {
.container {width: 95%}
}
@media screen and (min-width: 960px) {
.container {width: 95%}
}
@media screen and (min-width: 1200px) {
.container {width: 1200px}
}

.dropdown-menu {
    background: #0F574F;
}

.navbar {
    padding: 3px 0;
    background: #db8259;
    border-bottom: 6px solid #886453;
}
.mainmenu ul li {
    width: 140px;
}

.mainmenu ul li a {
    background: #0F574F;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 20px;
    display: block;
    color: #fff;
}

.mainmenu ul > li:hover > a {
   background: #588883;
}
.mainmenu ul li ul {
    background: #db8259;
}

.mainmenu {
    text-align: center;
}
.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.btn-outline-dark.dropdown-toggle {
    background-color: #0b3e38;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    background-color: #588883;

}
@media screen and (max-width: 991px) {
    .mainmenu ul li a {padding: 8px 0; display: block; margin:0 auto 3px;}
    .navbar-nav {padding-right: 145px;} 
    .dropdown-item, .mainmenu ul li a {width: 300px;}
    .dropdown-item {text-align: center;}
    .dropdown-menu {margin-left: -3px; width: 320px;}
}

<head>
    <title>CB Horní Počernice</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/all.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&amp;subset=latin-ext" rel="stylesheet"> 
</head>
 <header>
 <nav class="navbar navbar-expand-lg mainmenu justify-content-center sticky-top">
        <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Domů</a></li>
                    <li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Historie</a></li>
                    <li class="nav-item dropdown"><a class="nav-link btn btn-outline-dark dropdown-toggle mx-2" id="navbardrop" role="button" data-toggle="dropdown" href="#">Program</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Aktuální program</a>
                            <a class="dropdown-item" href="#">Sborový dopis</a>
                            <a class="dropdown-item" href="#">Texty</a>
                        </div>
                        </li>
                    <li class="nav-item dropdown"><a class="nav-link btn btn-outline-dark dropdown-toggle mx-2" id="navbardrop" role="button" data-toggle="dropdown" href="#">Služby</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Křty</a>
                            <a class="dropdown-item" href="#">Svatby</a>
                            <a class="dropdown-item" href="#">Pohřby</a>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Galerie</a></li>
                    <li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Kontakt</a></li>
                </ul>
            </nav>
        </header>

【问题讨论】：

getbootstrap.com/docs/4.1/utilities/position/#sticky-top 但只有在你滚动过去之后（这需要你添加bootstrap.js）。
我的中的链接不够？或者可能是不同的顺序？我尝试了一些变体，但没有一个对我有用。
这基本上是stackoverflow.com/questions/50907229/…的骗子

标签： html css twitter-bootstrap

【解决方案1】：

要检查的另一件事是是否有任何父元素设置了以下 css 属性之一：

溢出
溢出-y
溢出-x

如果此属性设置为以下值之一，它将不起作用：自动、隐藏、覆盖、滚动。

最好的解决办法是删除它或将其值更改为“未设置”

【讨论】：

你怎么知道这样的事情？？？感谢分享 - 为我修好了。
浪费了 2 个小时才找到解决方案。请注意，您可以使用普通 css link 的 position: sticky; 实现相同的目标。我想它也需要与答案中列出的相同的溢出删除。
那么如何隐藏底部的滚动条呢？ >.

【解决方案2】：

你用的是什么浏览器？

position: sticky 并非在所有浏览器中都完全支持。

在 IE11 和 IE10 中会渲染 position:sticky 为 position:relative。

更新：在<header> 中设置类名“sticky-top”将起作用，因为它相对于父元素具有粘性，在这种情况下，它是整个 HTML 正文

<header class="sticky-top">

【讨论】：

Chrome 版本 69.0.3497.100（官方构建），所以它应该可以工作。
@PavelHoryna 啊，我知道现在发生了什么，这是因为你在导航栏中设置了粘性类，但是你也有一个
包裹你的导航栏，你的导航栏会相对于标题，但标题中没有任何其他内容，这就是它不起作用的原因。解决它的一种方法是，删除您的
，并将其他内容放在导航栏下方。或者如果你不想删除标题，你可以像这样将css类放在标题中
看看这个演示，应该可以正常工作，希望它对你有帮助codepen.io/stevejiachen/pen/dgopvq
非常感谢您的帮助，我下班回家试试！

【解决方案3】：

我无法通过引导程序完全解决这个问题。 Jiachen Guo 提出的只是部分解决方案，因为它禁止我在标题中添加任何内容。

我通过添加来自 w3schools 的 javascript 解决了这个问题：https://www.w3schools.com/howto/howto_js_navbar_sticky.asp 这也支持更多的自定义。所以这就是我向那些在 bs4 中遇到粘性顶级类问题的人推荐的方法。

【讨论】：

我可以确认这是最好的解决方案，如果将导航栏放在标题标签之外，则粘顶会按预期工作，如果放在里面，则不会。而且我不知道为什么，因为标题标签没有任何特殊的属性（溢出......等）

【解决方案4】：

如您所见，它很容易实现。但是，如果您的元素没有按预期粘贴，首先要检查的是应用于容器的规则。

具体来说，查找父级上设置的任何溢出属性。您不能在位置的父级上使用：overflow: hidden、overflow: scroll 或 overflow: auto：粘性元素。

如果您没有使用溢出并且仍然有问题，是否值得检查是否在父级上设置了高度？这可能会限制粘性定位，阻止它发生。删除高度，看看是否能解决问题。

【讨论】：

【解决方案5】：

在我的情况下，导航栏在一个部分中，所以粘顶不起作用。因此，将导航栏从该部分中取出或使该部分置顶即可！

【讨论】：

@Aseem，如果有效，您应该为答案投票。
我做到了。这就是您的答案从-2变为-1的原因。 :)

【解决方案6】：

用div标签代替nav标签就可以了

【讨论】：

这是这个问题的正确答案，“sticky-top”只有在您将它用于导航栏时才是“nav”标签的类。

【解决方案7】：

通用解决方案：如果您的导航栏位于任何部分或 div 内，请立即将其删除。它肯定会起作用。

【讨论】：

【解决方案8】：

尝试删除标题标签，它对我有用。

【讨论】：

您好，欢迎来到 SO！请阅读tour 和How do I write a good answer? 例如，您可以详细说明此类更改的效果，以及与此问题的其他答案相比的优缺点。
非常感谢。它对我有用。但无法弄清楚为什么它不能与标题一起使用。