Bootstrap Scrollspy with Multiple Navbars

klsxnrf1 于 7个月前发布在 Bootstrap

关注(0)|答案(4)|浏览(65)

Here is a fiddle的一个。
由于in this question about creating a responsive nav menu描述的问题，我需要有两个相同的导航元素，一个是小屏幕可见的，另一个是大屏幕可见的。
但是我想让scrollspy同时跟踪和应用.active类。为了简单起见，假设我们有两个相同的navs，如下所示：

<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中，你会看到两个navs上的活动类被弄乱了，并且来回 Flink 。但是，如果你从其中一个navs中删除scrollspy类，另一个可以正常工作。这是可以修复的吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/18905886/bootstrap-scrollspy-with-multiple-navbars

4条答案

按热度按时间

roqulrg31#

这是修复我的朋友。这是一个有点拗口，所以如果有人有一个更直接的修复请继续。在同一时间，这将得到它固定。

$(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作为第二个导航。
小提琴：http://jsfiddle.net/jofrysutanto/MUpz5/1/

赞(0）回复(0）举报 7个月前

gkn4icbw2#

这个解决方案对我不起作用，因为我有2个导航，它们不一样，里面没有相同的锚链接。（.scrollspy1中的活动链接不一定在.scrollspy2中有相应的孪生链接）
然而，一个简单的：

$(".wrapper").scrollspy({ target: ".scrollspy, .scrollspy2" });

字符串
足以解决 Flink 问题。

赞(0）回复(0）举报 7个月前

oxf4rvwz3#

如果你提供一个空的目标，所有的导航工作：https://stackoverflow.com/a/23937735
我刚测试过。一个令人惊讶的解决方案。

赞(0）回复(0）举报 7个月前

lnvxswe24#

使用ID而不是类。

$(".wrapper").scrollspy({ target: "#scrollspy" });

字符串

赞(0）回复(0）举报 7个月前

我来回答

Bootstrap Scrollspy with Multiple Navbars

4条答案

相关问题

热门标签

最新问答