1
將Bootstrap JS Scrollspy添加到引導面板中時遇到一些問題。我想要一個固定的Nav進入面板，如W3School Example。 如果我嘗試設置固定的導航欄，我的navabr會進入真正的導航欄位置。 我不知道如何設置好它，我的面板有一個固定的高度，所以我必須允許溢出。將Bootstrap JS Scrollspy添加到引導面板中
$(document).ready(function(){
$('#fakeBody').scrollspy({target: "#navbarPnlBody", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#pnlNavBar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('.scrollbar,#fakeBody').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--REAL MENU-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Real Navbar Title</a>
</div>
<div class="collapse navbar-collapse" id="navBar">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
</ul>
</div>
</div>
</nav>
<!--END FAKE MENU-->
<kbd>OTHER PANEL AND EXTC...</kbd>
<div class="container-fluid" style="max-height: 10;">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-search"></span>
Header
</div>
<div class="panel-body">
<div id="fakeBody" data-spy="scroll" data-target="#navbarPnlBody" data-offset="">
<nav id="navbarPnlBody" class="navbar navbar-default navbar-static">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#pnlNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Navbar Title</a>
</div>
<div>
<div class="collapse navbar-collapse" id="pnlNavBar">
<ul class="nav navbar-nav">
<li class="active"><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
</div>
</div>
</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>
</div>
</div>
</div>