0

トップナビゲーションを固定して、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までスクロールすることです。

4

2 に答える 2

2

I just got it working by using this code instead of 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;
    });
});

hope it will help somebody :)

于 2013-02-03T12:45:35.973 に答える
0

これには ScrollSpy を使用する必要があると思います: http://twitter.github.com/bootstrap/javascript.html#scrollspy

タグにいくつかの属性を追加するだけで、カスタム JS は必要ありませんbody。

于 2013-02-19T16:03:49.177 に答える