0

このトピックに関するすでにたくさんの質問を読み、さまざまな方法を試しましたが、何らかの理由で scrollspy を動作させることができません!

最も最近の：

<body data-spy="scroll" data-target="#myScrollSpy">

そして私のナビゲーションバー：

<!-- Main Navigation -->
<nav id="myScrollSpy">
    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" data-id="section1" class="scroll-link">Portfolio</a></li>
            <li><a href="#" data-id="section2" class="scroll-link">About</a></li>
            <li><a href="#" data-id="section3" class="scroll-link">Team</a></li>
            <li><a href="#" data-id="section4" class="scroll-link">Services</a></li>
            <li><a href="#" data-id="section5" class="scroll-link">Contact</a></li>
        </ul>
    </div>
</div>

更新:<nav>を誤って閉じたことに気付き</div>、何も起こらなかったことを修正しました。<nav>また、代わりにこれを取り出して使用しようとしました<div class="collapse navbar-collapse navHeaderCollapse" id="#myScrollSpy">が、それもうまくいきませんでした。また、アクティブな状態がないことが問題かもしれないと思ったのでul.nav a:active { color: #fff; }、css に追加しましたが、それも機能しませんでした。

ライブバージョンはこちら

4

1 に答える 1

1

以下のように、各セクションに一意の ID を追加します。（あなたはすでにそれを持っています）

<section id="section1">

次に、この ID をnavigatonhrefで使用します。a

<li><a href="#section1">Portfolio</a></li>

アクティブ リンクのスタイルを指定しません。したがって、変更を表示することはできません。しかし、コードを調べると、ナビゲーションの要素にactiveクラスが追加されていることがわかります。li変更を表示するには、以下のようなアクティブなスタイルを適用します -

#myScrollSpy .nav > li.active a {
    color: #fff;
}
于 2014-03-16T13:14:26.547 に答える