我使用bootstrap 3和autoscroll插件。但是，autoscroll正在跳过菜单项，并在错误的时间选择错误的菜单项。即我滚动到第3部分，第2部分在菜单上突出显示。
以下是代码：
HTML
<div class="navbar navbar-fixed-top alt" data-spy="affix" data-offset-top="1000">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="#sec0">Home</a></li>
<li><a href="#sec1">Gear</a></li>
<li><a href="#sec2">Amenities</a></li>
<li><a href="#sec3">Artists</a></li>
<li><a href="#sec4">Studios</a></li>
<li><a href="#sec5">About</a></li>
<li><a href="#sec6">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="header alt vert" id="sec0">
<div class="container">
<div class="row">
<div class="col-lg-4"> </div>
<div class="col-lg-4 col-md-4 col-sm-4 logo">
<img class="img-responsive" src="img/logo7.png">
</div>
<div class="col-lg-4"> </div>
</div>
<div class="row">
<div class="col-lg-4"> </div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h4 class="tagline">Dedicated to your sound</h4>
<div> </div>
<a href="#" class="btn btn-default btn-lg">Visit us today!</a>
</div>
<div class="col-lg-4"> </div>
</div>
</div>
</div>
<hr>
<div id="sec1" class="blurb">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1>State of the art equipment</h1>
<p class="lead">At Willow Studios, you will work with only the best gear available.</p>
</div>
<div class="col-md-5">
<a href="#" class="btn btn-warning btn-lg blurb-button">View our gear list</a>
</div>
</div>
</div>
</div>
<hr>
<div class="featurette" id="sec2">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Amazing Amenities</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="featurette-item">
<img class="img-circle" src="img/Lounge.png">
<h4>Socialize</h4>
<p>Kick your feet up in our spacious lounge</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<img class="img-circle" src="img/wifi.png">
<h4>Connect</h4>
<p>Free Wifi throughout the facilities</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<img class="img-circle" src="img/cabin.png">
<h4>Rest</h4>
<p>Stay with us at our cabin; accommodates eight</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<img class="img-circle" src="img/firepit.png">
<h4>Warm up</h4>
<p>Take in some heat by our beautiful fire pit</p>
</div>
</div>
</div>
</div>
</div>
<div class="callout" id="sec3">
<div class="vert">
<div class="col-md-12 text-center"><h2 class="bg-transparent">Artists / Clients</h2></div>
<div class="col-md-12 text-center"> </div>
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row hidden-xs">
<div class="col-sm-2 bg-transparent spacing-top spacing-bottom">
<img class="img-circle grayscale" src="http://www.gravatar.com/avatar/5c708a2c9d25d1f2e4195ece1f1c684d?s=80">
<p>Recording at Willow Studios was a dream!</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
<div class="col-sm-2 bg-transparent spacing-top spacing-bottom">
<img class="img-circle grayscale" src="http://www.gravatar.com/avatar/3bb38f66f79ca138f318af89fe6b02ec?s=80">
<p>Recording at Willow Studios was a dream!</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
<div class="col-sm-2 bg-transparent spacing-top spacing-bottom">
<img class="img-circle grayscale" src="http://www.gravatar.com/avatar/3423a3e32fda92a5aaed72c7cde3849c?s=80">
<p>Recording at Willow Studios was a dream!</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
<div class="col-sm-2 bg-transparent spacing-top spacing-bottom">
<img class="img-circle grayscale" src="http://www.gravatar.com/avatar/325b6c3c0a75bfdb72822035bb556826?s=80">
<p>Recording at Willow Studios was a dream!</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
<div class="col-sm-2 bg-transparent spacing-top spacing-bottom">
<img class="img-circle grayscale" src="http://www.gravatar.com/avatar/cdd69340b0cfac4c7acb892e3ea7556e?s=80">
<p>Recording at Willow Studios was a dream!</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
<div class="col-sm-2 bg-transparent spacing-top spacing-bottom">
<img class="img-circle grayscale" src="http://www.gravatar.com/avatar/889778901fb1522dac2846ffe62bd960?s=80">
<p>Recording at Willow Studios was a dream!</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center spacing-top">
<a href="#" class="btn btn-default">Read all reviews</a>
</div>
</div>
</div>
</div>
</div>
... and so on
<ul class="nav pull-right scroll-down">
<li><a href="#" title="Scroll down"><i class="icon-chevron-down icon-3x"></i></a></li>
</ul>
<ul class="nav pull-right scroll-top">
<li><a href="#" title="Scroll to top"><i class="icon-chevron-up icon-3x"></i></a>/li>
</ul>
jQuery的：
/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
$('body,html').animate({scrollTop:0},800);
})
/* smooth scrolling for scroll down */
$('.scroll-down').click(function(){
$('body,html').animate({scrollTop:$(window).scrollTop()+800},1000);
})
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#navbar' })
任何帮助将不胜感激，谢谢你的时间。 小提琴：http://jsfiddle.net/LmzTG/
答案 0 :(得分：0)
首先，我在动画页面之前捕获了滚动事件，以确保在正确的时间突出显示菜单项。此外，我添加了5个像素的卷轴增量，以考虑我的一些部分之间的标题行。我改变了这样的jQuery代码：
jQuery的：
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#navbar' })
/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
$('body,html').animate({scrollTop:0},805);
})
/* smooth scrolling for scroll down */
$('.scroll-down').click(function(){
$('body,html').animate({scrollTop:$(window).scrollTop()+805},1000);
})
然后，我将每个部分的div更改为800像素高（以匹配滚动条的增量），通过其带有height属性的CSS。
HTML / CSS snipet：
<div id="sec1" class="blurb" style="height: 800px;">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1>State of the art equipment</h1>
<p class="lead">At Willow Studios, you will work with only the best gear available.</p>
</div>
<div class="col-md-5">
<a href="#" class="btn btn-warning btn-lg blurb-button">View our gear list</a>
</div>
</div>
</div>
</div>
<hr>
<div class="featurette" id="sec2" style="height: 800px;">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Amazing Amenities</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="featurette-item">
<img class="img-circle" src="img/Lounge.png">
<h4>Socialize</h4>
<p>Kick your feet up in our spacious lounge</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<img class="img-circle" src="img/wifi.png">
<h4>Connect</h4>
<p>Free Wifi throughout the facilities</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<img class="img-circle" src="img/cabin.png">
<h4>Rest</h4>
<p>Stay with us at our cabin; accommodates eight</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<img class="img-circle" src="img/firepit.png">
<h4>Warm up</h4>
<p>Take in some heat by our beautiful fire pit</p>
</div>
</div>
</div>
</div>
</div>
就是这样。它现在运作得很好，虽然权衡的是容纳你最高的部分使得一些部分看起来很光 - 内容很少。所以这是一个权衡：更多内容，或者没有用户的自动滚动选项。