html - 如何在引导程序中使用带有导航的词缀？

Question

我想要一个固定的顶部导航并使用 twitter 词缀。

<nav class="navbar">
    <ul id="siteMenu" class="nav">
        <li><a href="#homeSection" class="active">HOME</a></li>
        <li><a href="#aboutSection" class="active">ABOUT</a></li>
        <li><a href="#worksSection" class="active">WORKS</a></li>
                    .
                    .
                    .
    </ul>
</nav>

在此之下，我有 div：

<section id="homeSection" class="row">
.
.
.
</section>

<section id="aboutSection" class="row">
.
.
.
</section>

<section id="worksSection" class="row">
.
.
.
</section>

我的目标是在标记的导航中获得正确的元素（类=活动），并在我单击它时滚动到正确的 div。

Answer 1

我刚刚通过使用此代码而不是引导词缀来使其工作：

$(function () {
    // Cache selectors
    var siteMenu = $("#siteMenu"),
    siteMenuHeight = siteMenu.outerHeight() + 15,
    // All list items
    menuItems = siteMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function () {
        var item = $($(this).attr("href"));
        if (item.length) { return item; }
    });

    // Bind to scroll
    $(window).scroll(function () {
        // Get container scroll position
        var fromTop = $(this).scrollTop() + siteMenuHeight;

        // Get id of current scroll item
        var cur = scrollItems.map(function () {
            if ($(this).offset().top < fromTop)
                return this;
        });
        // Get the id of the current element
        cur = cur[cur.length - 1];
        var id = cur && cur.length ? cur[0].id : "";
        // Set/remove active class
        menuItems
     .parent().removeClass("active")
     .end().filter("[href=#" + id + "]").parent().addClass("active");
    });

    $('#da-slider').cslider({
        autoplay: true,
        interval: 6000
    });


    $('#siteMenu a').click(function () {
        var div = $(this).attr('href');
        $(div).scrollTo(500);
        return;
    });
});

希望它会帮助某人:)

Answer 2

我认为您应该为此使用 ScrollSpy：http: //twitter.github.com/bootstrap/javascript.html#scrollspy

您不需要任何自定义 JS，只需向body标签添加一些属性即可。