当用户开始滚动时，我遇到了 twitter bootstrap scroll spy 的问题。导航不会更改以指示它所在的部分，直到它到达 div 的中途。其次，它跳过第 4 项并直接进入最后一项。这是一个例子：http: //jsfiddle.net/eoboite/kjvAa/38/
我做错了什么？请帮忙
HTML：
<body data-spy="scroll">
<div class="header">
<div class="center-container"></div>
</div>
<div class="nav-container">
<div class="center-container">
<ul class="nav main-nav" id="nav-bar">
<li class="active"><a href="#item1">Item 1</a>
</li>
<li><a href="#item2">Item 2</a>
</li>
<li><a href="#item3">Item 3</a>
</li>
<li><a href="#item4">Item 4</a>
</li>
<li><a href="#item5">Item 5</a>
</li>
</ul>
</div>
</div>
<div>
<div class="sectional add-room" id="item1">
<div class="inner-wrapper">
<div class="center-container">
<h1>Item 1</h1>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<!-- end item1-->
<hr />
<div class="sectional add-room" id="item2">
<div class="inner-wrapper">
<div class="center-container">
<h1>Item 2</h1>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<!-- end item2-->
<hr />
<div class="sectional add-room" id="item3">
<div class="inner-wrapper">
<div class="center-container">
<h1>Item 3</h1>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<!-- end item3-->
<hr />
<div class="sectional add-room" id="item4">
<div class="inner-wrapper">
<div class="center-container">
<h1>Item 4</h1>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<!-- end item14-->
<hr />
<div class="sectional add-room" id="item5">
<div class="inner-wrapper">
<div class="center-container">
<h1>Item 5</h1>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<!-- end item5-->
<!--Include js-->
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
<script>
console.log('starting scroll spy');
$('.nav-container').affix({
off: {
top: 100
},
});
console.log('done');
</script>
</body>
CSS：
@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.center-container {
margin:0 auto;
width: 960px;
border:1px solid red;
overflow:hidden;
}
.header {
background:red;
padding: 30px 50px;
overflow:hidden;
}
.nav-container {
background: #0e1317;
overflow:hidden;
left:0;
margin-bottom:0;
right:0;
z-index:1030;
}
.active {
background:#075f81;
}
.nav-container.affix {
top: 0;
position:fixed;
}
ul.main-nav {
width: 960px;
}
ul.main-nav li {
float: left;
}
.main-nav > li > a {
color: #fff;
display:block;
padding: 25px 15px;
text-decoration:none;
}
.main-nav > li > a:hover {
text-decoration:underline;
}
.inner-wrapper {
padding:50px 20px;
}