导航栏上的Bootstrap 4粘性顶层类不起作用
也许我有一些其他的类弄不懂bootstrap的sticky-top类。我认为这就像将类添加到导航栏一样简单。我确实有2个导航栏，由于某些内部原因，不允许使用固定顶部。我一直希望我向下滚动时所拥有的第二个导航栏在顶部保持粘性。我究竟做错了什么？这是我的代码
/* .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 -->
3 个答案:
答案 0 :(得分：2)
它不起作用，因为父“主”容器的高度不高。如果将2000px的高度div移到main上，它将起作用，并且应在{main的直接子元素上使用sticky-top。
演示：https://www.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>
答案 1 :(得分：0)
要检查的另一件事是，是否有任何父元素设置了以下css属性之一：
溢出 溢出 溢出x 如果将此属性设置为以下值之一，则它将无效：自动，隐藏，覆盖，滚动。
最好的解决方案是将其删除或将其值更改为“未设置”
答案 2 :(得分：0)
来自https://github.com/twbs/bootstrap/issues/21919
.sticky-top如果在任何容器中，则将不起作用。它必须是<body>
这些示例有效：
<body>
<header class="sticky-top">
<nav class="navbar navbar-light bg-light p-0">
...
</nav>
</header>
...
</body>
和
<body>
<nav class="navbar sticky-top navbar-light bg-light p-0">
...
</nav>
...
</body>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？