0

作業中のWebサイトにBootstrap Scrollspyを実装しようとしていますが、何をしても動作しないようです(またはそのために何かをすることはできません)。

ウェブサイトはhttp://thecreativecompany.stage.webcomm.com.au/で見ることができます。

これが私のJavaScriptです：

$(document).ready(function () {
    var offset_height = $("nav").height();

    $('#nav-wrapper').height(offset_height);

    $("nav").affix({
        offset: $("nav").position()
    });

    $('body').scrollspy({
        target: '#nav-menu',
        offset: offset_height
    });

    $('#menu li a').click(function (event) {
        var scrollPos = $('body').find($(this).attr('href')).offset().top - (offset_height - 1);

        $('body,html').animate({
            scrollTop: scrollPos
        }, 500);

        return false;
    });
});
4

1 に答える 1

2

.navメニューにクラスがありません。ドキュメントから：

次に、任意の Bootstrap .navコンポーネントの親要素の ID またはクラスを含む data-target 属性を追加します。

したがって、クラスをメニューに追加するだけ<ul>です:

<div id="nav-menu">
    <ul id="menu" class="nav">
        <li><a href="#header">Home</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>

また、scrollspy プラグインから得られる結果は、.activeリスト アイテムに追加されるクラスなので、現在のスタイルに合わせて次のようなルールを CSS に追加することをお勧めします。

#menu li.active:after {
    height: 6px;
}
于 2013-08-24T07:27:26.643 に答える