- 首页
- 前端开发
- 导航栏上的 Bootstrap 4 粘性顶级类不起作用
导航栏上的 Bootstrap 4 粘性顶级类不起作用
[英] Bootstrap 4 sticky-top class on navbar not working
本文介绍了导航栏上的 Bootstrap 4 粘性顶级类不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
也许我的其他一些类正在搞乱 bootstrap 的粘性顶部类.我认为这就像将类添加到导航栏一样简单.我确实有 2 个导航栏，但由于某些内部原因不允许使用固定顶部.当我向下滚动时，我希望我拥有的第二个导航栏粘在顶部.我究竟做错了什么?这是我的代码
/* .text-spLeft {左边距:5px；}.text-spRight {右边距:5px；}.header-secondnav .fixed-top {margin-top: 70px !important;}.header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul {边框底部:5px；边框底部颜色:灰色；边框底部样式:实心；边框底部宽度:薄；}.header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li {底边距:15px；}.header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after {显示:无；}.header-firstnav .form-control:focus, .header-secondnav .form-control:focus {大纲:0 ！重要；}.header-firstnav .nav-link, .header-secondnav .nav-link {颜色:黑色;字体粗细:粗体；}.header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down {颜色:#eb1b1e；字体粗细:粗体；} */.text-spLeft {左边距:5px；}.text-spRight {右边距:5px；}.header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul {边框底部:5px；边框底部颜色:灰色；边框底部样式:实心；边框底部宽度:薄；}.header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li {底边距:15px；}.header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after {显示:无；}.header-firstnav .form-control:focus, .header-secondnav .form-control:focus {大纲:0 ！重要；}.header-firstnav .nav-link, .header-secondnav .nav-link {颜色:黑色;字体粗细:粗体；}.header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down {颜色:#eb1b1e；字体粗细:粗体；}.text-spLeft {左边距:5px；}.text-spRight {右边距:5px；}
<html lang="zh-cn"><头><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>文档</title><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 完整性="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="匿名"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTcrossorigin="匿名"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiWWPlvC"crossorigin="匿名"></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/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ER"crossorigin="匿名"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlSEOlvoEvnV"crossorigin="匿名"><身体><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="图像在这里" class="img-responsive"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span><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>
</span>
</表单><li class="nav-item "><a class="nav-link " href="#">在线购物</a><li class="nav-item "><a class="nav-link " href="#">Investor</a><li class="nav-item "><a class="nav-link " href="#">职业</a><li class="nav-item 下拉菜单"><a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">美国<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">美国<i class="fa fa-heart"></i>--><div class="下拉菜单" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">澳大利亚</a><a class="dropdown-item" href="#">加拿大</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">印度</a>
</nav>
<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="切换导航"><span class="navbar-toggler-icon"></span>--><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="#">首页 <span class="sr-only">(当前)</span></a><li class="nav-item"><a class="nav-link" href="#">Link</a>--><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">产品与服务<i class="fa fa-chevron-down" aria-hidden="true"></i></a><div class="下拉菜单" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">这里还有别的东西</a>
<li class="nav-item 下拉菜单"><a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">解决方案<i class="fa fa-chevron-down" aria-hidden="true"></i></a><div class="下拉菜单" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">这里还有别的东西</a>
<li class="nav-item 下拉菜单"><a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">行业<i class="fa fa-chevron-down" aria-hidden="true"></i></a><div class="下拉菜单" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">这里还有别的东西</a>
<li class="nav-item 下拉菜单"><a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">关于我们<i class="fa fa-chevron-down" aria-hidden="true"></i></a><div class="下拉菜单" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">这里还有别的东西</a>
<li class="nav-item 下拉菜单"><a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">资源中心<i class="fa fa-chevron-down" aria-hidden="true"></i></a><div class="下拉菜单" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">这里还有别的东西</a>
<li class="nav-item "><a class="nav-link " href="#">位置</a><li class="nav-item "><a class="nav-link " href="#">联系我们</a>
</nav>
<div style="height: 2000px;">
<!-- 页脚--><footer class="page-footer font-small mdb-color lighten-3 pt-4"><!-- 页脚链接--><div class="container text-center text-md-left"><!-- 网格行--><div class="row"><!-- 网格列--><div class="col-md-4 col-lg-3 mr-auto my-md-4 my-0 mt-4 mb-1"><!-- 内容--><h5 class="font-weight-bold text-uppercase mb-4">页脚内容</h5><p>您可以在此处使用行和列来组织页脚内容.</p><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Fugit amet numquam iure Provident voluptateesse quasi, veritatis totam voluptas nostrum.</p>
<!-- 网格列--><hr class="clearfix w-100 d-md-none"><!-- 网格列--><div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1"><!-- 链接--><h5 class="font-weight-bold text-uppercase mb-4">关于</h5><ul class="list-unstyled"><li><p><a href="#!">项目</a></p><li><p><a href="#!">关于我们</a></p><li><p><a href="#!">BLOG</a></p><li><p><a href="#!">奖项</a></p>
<!-- 网格列--><hr class="clearfix w-100 d-md-none"><!-- 网格列--><div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1"><!-- 联系方式--><h5 class="font-weight-bold text-uppercase mb-4">地址</h5><ul class="list-unstyled"><li><p><i class="fa fa-home mr-3"></i>纽约，NY 10012，美国<li><p><i class="fa fa-envelope mr-3"></i>info@example.com</p><li><p><i class="fa fa-phone mr-3"></i>+ 01 234 567 88<li><p><i class="fa fa-print mr-3"></i>+ 01 234 567 89
<!-- 网格列--><hr class="clearfix w-100 d-md-none"><!-- 网格列--><div class="col-md-2 col-lg-2 text-center mx-auto my-4"><!-- 社交按钮--><h5 class="font-weight-bold text-uppercase mb-4">关注我们</h5><!-- Facebook --><a type="button" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></a><!-- 推特--><a type="button" class="btn-floating btn-tw"><i class="fa fa-twitter"></i></a><!-- 谷歌 +--><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 class="footer-copyright text-center py-3">© 2018 版权所有:<a href="https://mdbootstrap.com/bootstrap-tutorial/">MDBootstrap.com</a>
<!-- 版权所有--></页脚><!-- 页脚-->
解决方案
它不起作用，因为父级main"容器没有任何显着的高度.如果您将 2000px 高度的 div 移动到 main 中，它将起作用，并且 sticky-top 应该用于作为main"的直接子元素的元素.
演示:https://codeply.com/go/5aDkGY8KjI
<div class="header-firstnav"><nav class="navbar navbar-expand-lg">...</nav>
<div class="header-secondnav sticky-top"><nav class="navbar navbar-expand-lg">...</nav>
<div>内容与高度...</div>
<页脚></页脚>
另请注意:sticky-top 如果任何父对象有 overflow: hidden
将不起作用相关:如何放置使用引导程序 4 在粘性导航栏下方的导航栏?
Maybe some other classes I have are messing with the sticky-top class of 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. 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 -->
解决方案
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".
Demo: 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
Related: How to place navbar below sticky navbar using bootstrap 4?
这篇关于导航栏上的 Bootstrap 4 粘性顶级类不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
