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>

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

Answer 1

我只是使用此代码而不是bootstrap Affix：

$(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标记添加一些属性。

如何在bootstrap中使用带有nav的Affix？

2 个答案: