Question

我是Bootstrap的新手，试图制作响应式菜单。由于某种原因，粘性顶无法工作。我的浏览器确实支持它，并且将我的代码与其他工作版本进行比较，我只是看不到为什么它不起作用。我正在使用Bootstrap 4.1.3。编辑：添加了我的css工作表，但我不知道与sticky-top的任何可能的冲突。

<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>



 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;}
}

Answer 1

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

溢出
溢出-y
overflow-x

如果将此属性设置为以下值之一，则将无效：自动，隐藏，覆盖，滚动。

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

Answer 2

您正在使用什么浏览器？

位置：粘性，并非所有浏览器都完全支持。

在IE11和IE10中，将呈现位置：粘性作为位置：相对。

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

<header class="sticky-top">

Answer 3

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

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

如果您没有使用溢出功能但仍然遇到问题，是否值得检查父级是否设置了高度？这可能会限制粘性定位，从而阻止其发生。移开高度，看看是否可以解决问题。

Answer 4

只需将div标签替换为nav标签，就可以了

Answer 5

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

Answer 6

我无法使用引导程序完全解决此问题。郭嘉晨建议的只是部分解决方案，因为它禁止我在标头中添加任何内容。

我通过添加来自w3schools的javascript来解决了这一问题：https://www.w3schools.com/howto/howto_js_navbar_sticky.asp这也可以实现更多的自定义。因此，这是我向那些在bs4中遇到粘性顶类问题的人的建议。

Answer 7

在我的情况下，导航栏位于某个部分中，因此粘性顶部无法正常工作。因此，将导航栏移出该部分或使该部分粘顶即可！

Answer 8

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

为什么粘性顶部在Bootstrap 4中不起作用？

8 个答案: