Having trouble with the twitter bootstrap scroll spy feature as the navigation doesn't update until midway through scrolling and skips item 4 to reach the last item. Check out this example: http://jsfiddle.net/eoboite/kjvAa/38/
What am I doing wrong? Help, please.
Here's the 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>
Here's the custom 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;
}