由于在这个关于创建响应式导航菜单的问题中描述的问题,我需要有两个相同的导航元素,一个对于小屏幕可见,另一个对于大屏幕可见。
但是我希望滚动间谍能够同时跟踪和应用
.active
类。为了简单起见,假设我们有两个相同的导航,如下所示:
<div class="scrollspy navbar">
<nav class="nav">
<li><a href="#option1">Option 1</a></li>
<li><a href="#option2">Option 2</a></li>
<li><a href="#option3">Option 3</a></li>
<li><a href="#option4">Option 4</a></li>
<li><a href="#option5">Option 5</a></li>
</nav>
</div>
然后是内容:
<div class="content">
<section id="option1">1</section>
<section id="option2">2</section>
<section id="option3">3</section>
<section id="option4">4</section>
<section id="option5">5</section>
</div>
然后调用scrollspy:
$(".wrapper").scrollspy({ target: ".scrollspy" });
您会在fiddle中看到活动类变得混乱并且在两个导航上来回闪烁。但是,如果您从其中一个导航中删除
scrollspy
类,则另一个导航可以正常工作。这个可以修复吗?
这是我的朋友的修复方法。这有点拗口,所以如果有人有更简单的解决办法,请继续。同时这会解决它。
$(document).ready(function () {
$(".wrapper").scrollspy({ target: ".scrollspy" });
var scollSpy2ActiveLI = "";
$('.wrapper').on('activate.bs.scrollspy', function () {
if (scollSpy2ActiveLI != "") {
scollSpy2ActiveLI.removeClass('active');
}
var activeTab = $('.scrollspy li.active a').attr('href');
scollSpy2ActiveLI = $('.scrollspy2 li a[href="' + activeTab + '"]').parent();
scollSpy2ActiveLI.addClass('active');
})
$('.wrapper').trigger('activate.bs.scrollspy');
});
请注意,我正在使用
.scrollspy2
作为您的第二个导航。
这个解决方案对我不起作用,因为我有 2 个导航,它们不相同,并且内部没有相同的锚链接。 (.scrollspy1 中的活动链接不一定在 .scrollspy2 中具有相应的孪生链接)
但是,一个简单的:
$(".wrapper").scrollspy({ target: ".scrollspy, .scrollspy2" });
足以解决闪烁问题。
如果您提供空目标,则所有导航都可以工作:https://stackoverflow.com/a/23937735
刚刚亲自测试过。一个令人惊讶的解决方案。
使用 id 而不是类。
$(".wrapper").scrollspy({ target: "#scrollspy" });
有一个简单的解决方案,只需添加
<body data-bs-spy="scroll" data-bs-target="#navbarNavIdOne">
<div class="wrapper" data-bs-spy="scroll" data-bs-target="#navbarNavIdTwo">
...
</div>
</body>
到多个 html 元素来创建 ScrollSpy 的新实例