我一直在研究我的第一个网站用于学习目的并遇到这个问题:
每当我链接到同一页面上的特定位置时,它都会按预期打开,但顶部会被导航栏覆盖。
<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后,覆盖整个部分的scrollspy divs已被定位,因此返回了问题。)
P.S。:没有使用JS / Query。
答案 0 :(得分:0)
这可能有助于或给你一些想法;你基本上只是在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>