导航栏上的 Bootstrap 4 粘性顶级类不起作用

Question

Maybe some other classes I have are messing with the sticky-top class of bootstrap.也许我拥有的其他一些课程正在搞乱 bootstrap 的粘性顶级课程。 I thought it was as simple as adding the class to the navbar.我认为这就像将类添加到导航栏一样简单。 I do have 2 navbar and not allowed to use fixed-top for some internal reasons.我确实有 2 个导航栏，但由于某些内部原因不允许使用固定顶部。 I was hoping for the second navbar I have is sticky to the top while I am scrolling down.当我向下滚动时，我希望我拥有的第二个导航栏粘在顶部。 What am I doing wrong?我究竟做错了什么？ here's my code这是我的代码

 /* .text-spLeft { margin-left: 5px; } .text-spRight { margin-right: 5px; } .header-secondnav .fixed-top { margin-top: 70px !important; } .header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul { border-bottom: 5px; border-bottom-color: grey; border-bottom-style: solid; border-bottom-width: thin; } .header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li { margin-bottom: 15px; } .header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after { display: none; } .header-firstnav .form-control:focus, .header-secondnav .form-control:focus { outline: 0 !important; } .header-firstnav .nav-link, .header-secondnav .nav-link { color: black; font-weight: bold; } .header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down { color: #eb1b1e; font-weight: bold; } */ .text-spLeft { margin-left: 5px; } .text-spRight { margin-right: 5px; } .header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul { border-bottom: 5px; border-bottom-color: grey; border-bottom-style: solid; border-bottom-width: thin; } .header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li { margin-bottom: 15px; } .header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after { display: none; } .header-firstnav .form-control:focus, .header-secondnav .form-control:focus { outline: 0 !important; } .header-firstnav .nav-link, .header-secondnav .nav-link { color: black; font-weight: bold; } .header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down { color: #eb1b1e; font-weight: bold; } .text-spLeft { margin-left: 5px; } .text-spRight { margin-right: 5px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="./header.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <div class="main"> <div class="header-firstnav"> <nav class="navbar sticky-top navbar-expand-lg"> <a class="navbar-brand" href="#"> <img src="./images/dnowlogo.png" alt="image goes here" class="img-responsive"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav d-flex justify-content-between w-100 top-nav-ul "> <li class="nav-item "> <form class="form-inline my-2 my-lg-0"> <div class="input-group"> <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <div class="input-group-text bg-white"> <i class="fa fa-search"></i> </div> </span> </div> </form> </li> <li class="nav-item "> <a class="nav-link " href="#">Shop Online</a> </li> <li class="nav-item "> <a class="nav-link " href="#">Investor</a> </li> <li class="nav-item "> <a class="nav-link " href="#">Careers</a> </li> <li class="nav-item dropdown "> <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> United States <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> <!-- <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> United States <i class="fa fa-heart"></i> </button> --> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Australia</a> <a class="dropdown-item" href="#">Canada</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">India</a> </div> </li> </ul> </div> </nav> </div> <div class="header-secondnav"> <nav class="navbar sticky-top navbar-expand-lg"> <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- <ul class="navbar-nav justify-content-lg-between w-100 d-lg-flex"> --> <!-- <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> --> <ul class="navbar-nav d-flex justify-content-between w-100"> <li class="nav-item dropdown"> <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products and Services <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown "> <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Solutions <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown "> <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Industries <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown "> <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About Us <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown "> <a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Resources Center <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item "> <a class="nav-link " href="#">Location</a> </li> <li class="nav-item "> <a class="nav-link " href="#">Contact Us</a> </li> </ul> </div> </nav> </div> </div> <div style="height: 2000px;"> </div> <!-- Footer --> <footer class="page-footer font-small mdb-color lighten-3 pt-4"> <!-- Footer Links --> <div class="container text-center text-md-left"> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-4 col-lg-3 mr-auto my-md-4 my-0 mt-4 mb-1"> <!-- Content --> <h5 class="font-weight-bold text-uppercase mb-4">Footer Content</h5> <p>Here you can use rows and columns here to organize your footer content.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum.</p> </div> <!-- Grid column --> <hr class="clearfix w-100 d-md-none"> <!-- Grid column --> <div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1"> <!-- Links --> <h5 class="font-weight-bold text-uppercase mb-4">About</h5> <ul class="list-unstyled"> <li> <p> <a href="#!">PROJECTS</a> </p> </li> <li> <p> <a href="#!">ABOUT US</a> </p> </li> <li> <p> <a href="#!">BLOG</a> </p> </li> <li> <p> <a href="#!">AWARDS</a> </p> </li> </ul> </div> <!-- Grid column --> <hr class="clearfix w-100 d-md-none"> <!-- Grid column --> <div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1"> <!-- Contact details --> <h5 class="font-weight-bold text-uppercase mb-4">Address</h5> <ul class="list-unstyled"> <li> <p> <i class="fa fa-home mr-3"></i> New York, NY 10012, US</p> </li> <li> <p> <i class="fa fa-envelope mr-3"></i> info@example.com</p> </li> <li> <p> <i class="fa fa-phone mr-3"></i> + 01 234 567 88</p> </li> <li> <p> <i class="fa fa-print mr-3"></i> + 01 234 567 89</p> </li> </ul> </div> <!-- Grid column --> <hr class="clearfix w-100 d-md-none"> <!-- Grid column --> <div class="col-md-2 col-lg-2 text-center mx-auto my-4"> <!-- Social buttons --> <h5 class="font-weight-bold text-uppercase mb-4">Follow Us</h5> <!-- Facebook --> <a type="button" class="btn-floating btn-fb"> <i class="fa fa-facebook"></i> </a> <!-- Twitter --> <a type="button" class="btn-floating btn-tw"> <i class="fa fa-twitter"></i> </a> <!-- Google +--> <a type="button" class="btn-floating btn-gplus"> <i class="fa fa-google-plus"></i> </a> <!-- Dribbble --> <a type="button" class="btn-floating btn-dribbble"> <i class="fa fa-dribbble"></i> </a> </div> <!-- Grid column --> </div> <!-- Grid row --> </div> <!-- Footer Links --> <!-- Copyright --> <div class="footer-copyright text-center py-3">© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a> </div> <!-- Copyright --> </footer> <!-- Footer -->

Answer 1

It's not working because the parent "main" container doesn't have any significant height.它不起作用，因为父“主”容器没有任何显着的高度。 If you move your 2000px height div into main it will work, and sticky-top should be used on the element that is an immediate child of "main".如果您将 2000px 高度的 div 移动到 main 中，它将起作用，并且应该在作为“main”的直接子元素的元素上使用sticky-top 。

Demo: https://codeply.com/go/5aDkGY8KjI演示： https : //codeply.com/go/5aDkGY8KjI

<div class="main">
    <div class="header-firstnav">
        <nav class="navbar navbar-expand-lg">
             ...
        </nav>
    </div>

    <div class="header-secondnav sticky-top">
        <nav class="navbar navbar-expand-lg">
             ...
        </nav>
    </div>

    <div>content with height...</div>
</div>
<footer></footer>

Also note: sticky-top will not work if any of the parents have overflow: hidden另请注意：如果任何父级overflow: hidden sticky-top将不起作用overflow: hidden

Related: How to place navbar below sticky navbar using bootstrap 4?相关：如何使用引导程序 4 将导航栏放置在粘性导航栏下方？

Answer 2

From https://github.com/twbs/bootstrap/issues/21919来自https://github.com/twbs/bootstrap/issues/21919

.sticky-top will not work if it is inside any container. .sticky-top位于任何容器内，它将不起作用。 It must be the outside-most element inside <body>它必须是<body>最外面的元素

These examples work:这些示例有效：

<body>
    <header class="sticky-top">
        <nav class="navbar navbar-light bg-light p-0"> 
            ... 
        </nav>
    </header>
...
</body>

and和

<body>
    <nav class="navbar sticky-top navbar-light bg-light p-0">
        ...
    </nav>
...
</body>

Answer 3

One more thing to check is if any parent element has one of these css properties set:要检查的另一件事是是否有任何父元素设置了以下 css 属性之一：

overflow overflow-y overflow-x If this property is set to one of these vales it will NOT work: auto, hidden, overlay, scroll.溢出溢出-y 溢出-x 如果此属性设置为以下值之一，它将不起作用：自动、隐藏、覆盖、滚动。

The best solution is to remove it or change its value to 'unset'最好的解决方案是删除它或将其值更改为“未设置”

导航栏上的 Bootstrap 4 粘性顶级类不起作用

问题描述

3 个解决方案

解决方案1
15 已采纳 2018-08-20 15:20:16

解决方案2
6 2020-10-01 19:01:18

解决方案3
3 2019-08-29 14:01:29

导航栏上的 Bootstrap 4 粘性顶级类不起作用

问题描述

3 个解决方案

解决方案1 15 已采纳 2018-08-20 15:20:16

解决方案2 6 2020-10-01 19:01:18

解决方案3 3 2019-08-29 14:01:29

解决方案1
15 已采纳 2018-08-20 15:20:16

解决方案2
6 2020-10-01 19:01:18

解决方案3
3 2019-08-29 14:01:29