如何使用滚动间谍而不使用引导程序
如何使用滚动间谍而不使用引导程序
提问于 2015-05-20 11:27:11
有人知道如何不用引导就使用滚动间谍吗？我正试图让它在我的一个项目中使用这个存储库：
https://github.com/sxalexander/jquery-scrollspy
但它只是做不到引导者所做的。li标记没有标记为active :(希望提供任何帮助。
我试过这样做：
$('#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。
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-05-26 13:50:43
为了解决这个问题，我写了自己的插件。在这里可以找到：
Stack Overflow用户
发布于 2018-03-13 13:28:01
如果还有人对此感兴趣，我无法让引导滚动间谍足够快地工作，所以我编写了自己的解决方案(技术效率低，但很简单)。
下面是一个演示：
$(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>
Stack Overflow用户
发布于 2015-05-20 12:29:12
github.com/sxalexander/jquery-scrollspy似乎没有像引导插件那样自动激活<nav>菜单。
但是，它确实提供了进入视图的元素的ID。请参阅在控制台中打印元素ID的这个JSFiddle。
您需要决定如何突出显示与具有ID的元素对应的菜单项。例如，在菜单链接上设置data-target="section1"属性，然后当有ID的section1元素进入视图时，通过$("#intel_nav a[data-target='" + "section1" + "']")定位菜单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30348314
复制相关文章
相似问题
腾讯云开发者
