有没有人知道如何使用scrollspy而不使用bootstrap？我正在尝试使用此存储库在我的一个项目中使用它：
https://github.com/sxalexander/jquery-scrollspy
但它只是不做引导程序所做的事情。 li标签未标记为活动:(任何帮助将不胜感激。
我试过这样做：
$('#intel_nav').scrollspy({
//n: $('#nav').offset().top,
onEnter: function (element, position) {
console.log(element);
$("#intel_nav").addClass('moo');
},
onLeave: function (element, position) {
$("#intel_nav").removeClass('out');
}
});
该元素似乎是实际的菜单，所以我不知道如何实际获取我当前悬停的元素的id。
为了解决这个问题，我编写了自己的插件。哪个可以在这里找到：
如果有人仍然对此感兴趣，我无法让bootstrap scrollspy足够快地工作，所以我编写了自己的（技术上效率低下但很简单）解决方案。
这是一个演示：
$(window).bind('scroll', function() {
var currentTop = $(window).scrollTop();
var elems = $('.scrollspy');
elems.each(function(index){
var elemTop = $(this).offset().top;
var elemBottom = elemTop + $(this).height();
if(currentTop >= elemTop && currentTop <= elemBottom){
var id = $(this).attr('id');
var navElem = $('a[href="#' + id+ '"]');
navElem.parent().addClass('active').siblings().removeClass( 'active' );
}
})
}); .active{
color: red;
background-color: red;
}
#nav{
position:fixed;
top:0;
right:50%;
}
section{
min-height: 500px;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<nav id="nav" class="navbar navbar-template">
<div class="row col-xs-12 text-center">
<ul>
<li class="active">
<a href="#Home">Home</a>
</li>
<li>
<a href="#AboutUs">AboutUs</a>
</li>
<li>
<a href="#Images">Images</a>
</li>
<li>
<a href="#Contact">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="scrollspy" id="Home">
Home
</section>
<section class="scrollspy" id="AboutUs">
AboutUs
</section>
<section class="scrollspy" id="Images">
Images
</section>
<section class="scrollspy" id="Contact">
Contact
</section>
</body>github.com/sxalexander/jquery-scrollspy似乎没有像引导程序插件那样自动激活<nav>菜单。
但它确实提供了进入视图的元素的ID。请参阅this JSFiddle，它在控制台中打印元素ID。
您需要决定如何突出显示与其ID相对应的元素的菜单项。例如，在菜单链接上设置data-target="section1"属性，然后当ID为section1的元素进入视图时，通过$("#intel_nav a[data-target='" + "section1" + "']")找到菜单
您可以使用bootstrap的自定义页面仅下载scrollspy JS。你还需要“nav”css。这个链接应该是你需要的：http://getbootstrap.com/customize/?id=8f4a63b0157214af61c9ce380630a64d
下载JS和CSS文件并将其添加到您的站点。 Scrollspy应该适用于每个bootstrap的文档（http://getbootstrap.com/javascript/#scrollspy）
在回顾了所有建议后，我遵循Gyrocode.com的想法，使用Mr. Sam Alexander (sxalexander) jquery-scrollspy，这是一个基于David Walsh的MooTools卷轴的精美作品;我相信这不是很难用任何菜单（有或没有导航）或任何创造性的职责，如Gyrocode.com在他们的JSFiddle提出的。
当所有部分都具有相同的标记（如<section>）或在这种情况下具有相同的类名（.scrollspy）时，可以访问的所有部分，以及这些部分告诉我们它们的ID（作为插件的一部分）
我分享我对此的实现：
var menuSelected = null; // var to detect current selected element to pass the class that does visible the spy.
jQuery(document).ready(function( $ ){
// Detect Initial scroll position
var currentTop = $(window).scrollTop();
$('.scrollspy').each(function (i) {
var position = $(this).position();
// Only to activate the top element ( current # )
// if current is less than height.
if ( i === 0 && !menuSelected && currentTop < $(this).height() ) navUpdate( $('a[href="#' + $(this).attr( 'id' ) + '"]') );
// Basic implementation
$(this).scrollspy({
min: position.top - 100,
max: position.top + $(this).height(),
onEnter: function (element, position) {
// update the button that have the element ID
navUpdate( $('a[href="#' + element.id+ '"]') );
}
});
});
// method to update the navigation bar
function navUpdate( where ){
if ( menuSelected ) menuSelected.removeClass( 'active' );
menuSelected = where.parent();
menuSelected.addClass( 'active' );
}
});