Bootstrap导航栏在链接时覆盖该部分的顶部
[英]Bootstrap navbar covers top of section when linked
问题描述
我一直在我的第一个网站上进行学习，但遇到了这个问题：
每当我链接到同一页面上的特定位置时，它都会按预期打开，但顶部会覆盖着导航栏。
<body data-spy="scroll" data-target="#myNavbar" data-offset="50">
<nav id="myNavbar" role="navigation" class="container-fluid navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"></a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#section1">Home</a></li>
<li><a href="#section2">About</a></li>
<li><a href="#section3">Portfolio</a></li>
<li><a href="#section4">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron" id="section1">
<h1 class="header"></h1>
<hr class="style" />
<un class="list-inline">
<li>
<a href="#">
<span class="glyphicon glyphicon-chevron-left"></span> Facebook
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-chevron-left"></span> GitHub
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-chevron-left"></span> LinkedIn
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</li>
</un>
</div>
</body>
有什么方法可以使其链接到导航栏下方，从而使其不会覆盖本节的顶部？
尝试用身体的填充物来玩，但是没有用。
（我能够通过链接到单独的div并通过CSS对其进行调整来解决此问题，但是在实现了覆盖整个部分的bootstrap spy div div之后，就不得不将其作为目标，因此问题就回来了。）
PS：没有使用JS /查询。
1 个解决方案
解决方案1
0 2015-09-21 16:13:33
这可能会有所帮助或给您一些想法； 实际上，您只是在navbar-fixed-top类下一起使用两个navbar-fixed-top因此它们一起滚动。
body { margin-top: 100px; position: relative; } .navbar.nav-lower { height: 20px; background: #f5f5f5; border-radius: 0; border: none; margin-bottom: 0; } .nav-lower .navbar-toggle, .nav-lower .navbar-toggle:focus, .nav-lower .navbar-toggle:hover { border: none; background: none; } .navbar.nav-lower > li { display: inline-block; width: 33%; text-align: center; } #section1 { padding-top: 100px; height: 500px; color: #fff; background-color: #1E88E5; } #section2 { padding-top: 100px; height: 500px; color: #fff; background-color: #673ab7; } #section3 { padding-top: 100px; height: 500px; color: #fff; background-color: #ff9800; } #section4 { padding-top: 100px; height: 500px; color: #fff; background-color: #00bcd4; } @media (max-width: 767px) { .nav-lower .navbar-collapse { text-align: left; background: #f5f5f5; } } @media (min-width: 767px) { .navbar.navbar-default.nav-lower .navbar-inner { padding: 0; } .navbar.navbar-default.nav-lower .nav { margin: 0; display: table; width: 100%; } .navbar.navbar-default.nav-lower .nav > li { display: table-cell; float: none; } .navbar.navbar-default.nav-lower .nav > li > a { text-align: center; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <body data-spy="scroll" data-target="#myNavbar" data-offset="100"> <nav class="navbar navbar-default navbar-custom navbar-fixed-top" id="myNavbar"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button><a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#section1">Home</a> </li> <li><a href="#section2">About</a> </li> <li><a href="#section3">Portfolio</a> </li> <li><a href="#section4">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> <nav class="navbar navbar-default nav-lower"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-lower-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-lower-nav"> <ul class="nav navbar-nav"> <li> <a href="#"> <span class="glyphicon glyphicon-chevron-left"></span> Facebook <span class="glyphicon glyphicon-chevron-right"></span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-chevron-left"></span> GitHub <span class="glyphicon glyphicon-chevron-right"></span> </a> </li> <li><a href="#"><span class="glyphicon glyphicon-chevron-left"></span> LinkedIn <span class="glyphicon glyphicon-chevron-right"></span></a> </li> </ul> </div> </nav> </nav> <div id="section1" class="container-fluid"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section2" class="container-fluid"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section3" class="container-fluid"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section4" class="container-fluid"> <h1>Section 4</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </body>
如何在 jquery & bootstrap 5 中的主要固定顶部导航栏下的特定部分的滚动上添加第二个粘性导航栏？
[英]How to add a second sticky navbar on scroll of a particular section, under the primary fixed-top navbar, in jquery & bootstrap 5?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.