2

文書化された手順に従って、Twitterブートストラップの最新バージョンで接辞コンポーネントを使用しようとしていますが、動作しません。JsFiddleの例を次に示します。

2つの問題があると思います

  • sidenav リンクをクリックすると適切なコンテンツに正しくスクロールされるが、コンテンツをスクロールしても適切な sidenav リンクがアクティブにならない
  • sidenav は、ブートストラップWeb サイトのようにスタイル設定されていません。

誰かがこれを Twitter ブートストラップ サイトのように機能させるのを手伝ってくれたら幸いです。

4

2 に答える 2

6

ScrollSpy を探しています。スクロールするか、適切なセクションに切り替えると、メニュー項目が強調表示されます。

Affix は、何らかの方法で実験的な CSS に代わるものposition:stickyです。上からn pxスクロールすると、メニューpositionが からstaticに変わります。fixed

于 2012-09-17T21:38:35.833 に答える
4

affix に関するドキュメントは、「左側のサブナビゲーションは affix プラグインのライブ デモです」という affix について説明しているため、混乱を招きます。一方、このサブナビゲーションはさらにスクロールスパイの例です。

ブートストラップドキュメントのようなサブナビゲーションを小さなjsfiddleに似せました

http://jsfiddle.net/citykid/Gb2SD/6/

<body>
    <div class="container">
        <div class="row">
            <div class="span2" id="navparent">
                <ul class="nav nav-list navex" data-spy="affix">
                    <li><a href="#o">overview</a>
                    </li>
                    ...
                </ul>
            </div>
            <div class="span9">
                <p>top of the document</p>
                 <h3 id="o" data-offset-top="200">Overview</h3>
                <div style="height:500px">dummy content overview</div>
                ...
            </div>
        </div>
    </div>
    <script src="/js/jquery-1.9.0.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
    <script>
        $(document).ready(function() {
            $(document.body).scrollspy({
                target: "#navparent"
            });
        });
    </script>
</body>

データ属性ではなく JS API を使用してください。そうしないと、jsfiddle.net/citykid/Gb2SD/4 で説明されているバグが発生します。

于 2013-02-07T17:50:23.350 に答える