0

私は初心者のフロントエンダーで、理解できない問題があります。マイページでは、トップメニューからリンクをクリックすると、目的のブロックまでスクロールダウンします。ただし、ユーザーがページを数ピクセル下にスクロールしない限り、リンクはアクティブとしてマークされません。なぜこれが起こっているのですか、どうすれば修正できますか? html は次のとおりです。

            <nav class="menu">
                <div class="nav-collapse">
                    <ul class="nav">
                     <li><a data-action="scrollTo" href="#content" class="hover">Download</a></li>
                     <li><a data-action="scrollTo" href="#productfeatures">Product Features</a></li>
                     <li><a data-action="scrollTo" href="#howitlooklike">How it look like</a></li>
                     <li><a data-action="scrollTo" href="#mobile">Mobile Version</a></li>
                     <li><a data-action="scrollTo" href="#footer">Contacts</a></li>     
                    </ul>
                </div>
            </nav><!-- Nav End-->

ページを更新して上にスクロールすると、アクティブなリンクが表示されます。

ここで見ることができるすべてのコード

4

1 に答える 1

1

Bootstrap を使用している場合は、その 'ScrollSpy' JS コンポーネントを使用してみませんか?

使いやすく、ウィンドウの上部からのオフセットを設定できます。これは、現在のサイトの根本的な問題です。ナビゲーションを固定している間、上からの位置に基づいてアクティブ化します。

「ScrollSpy」を使用して、オフセットをNAV要素の高さより少し高く設定できます。また、新しいナビゲーション リンクがアクティブになるたびに発生する「アクティブ化」イベントもあります。それで、それはあなたのためにトリックをするはずです。

リンクは次のとおりです。http://getbootstrap.com/javascript/#scrollspy

于 2013-08-07T08:52:17.793 に答える