12

Bootstrap 3 を使用しています。Bootstrap サイトのドキュメントにあるサイドバーと同じ機能を再作成したいと考えています。

以下は私のコードで、ここにもあります：http://bootply.com/82119

2 つの問題。

  1. 各セクションを過ぎてページを下にスクロールすると、サイドバーの項目が強調表示されません。
  2. サイドバーの項目をクリックすると、関連するアンカーにジャンプしますが、コンテンツの半分が表示されません。値を変更data-offsetしても効果がないように見えます。

私は何を間違っていますか？

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group navbar" id="sidebar">
                <ul class="nav" id="mynav">
                    <li><a href="#c1" class="list-group-item">
                          Content 1
                        </a>
                    </li>
                    <li> <a href="#c2" class="list-group-item" contenteditable="false">Content 2
                        </a>
                    </li>
                    <li> <a href="#c3" class="list-group-item" contenteditable="false">Content 3
                        </a>
                    </li>
                    <li> <a href="#c4" class="list-group-item" contenteditable="false">Content 4
                        </a>
                    </li>
                    <li> <a href="#c5" class="list-group-item" contenteditable="false">Content 5
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-9" id="mycontent" data-spy="scroll" data-target="#sidebar" data-offset="0">
                <h2 id="c1" class="">Content 1</h2>
At Bootply we attempt to build simple Bootstrap templates that utilize...
            <hr class="col-md-12">
                    <h2 id="c2" class="">Content 2</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                <hr class="col-md-12">
                    <h2 id="c3" class="">Content 3</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                <hr class="col-md-12">
                    <h2 id="c4" class="">Content 4</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
                    <h2 id="c5" class="">Content 5</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </div>
    </div>
</div>
4

2 に答える 2

1

私はこの同じ問題に遭遇し、ナビゲーション リンクのクリックをキャッチし、ブラウザーがクリックを処理できないようにし、ページ レイアウトに合わせて調整された位置でターゲット要素に手動でスクロールすることで解決しました。コードは次のとおりです。

        // figure out a nice offset from the top of the page
        var scrollTopOffset = $('#main-nav-banner').outerHeight() + 50;
        // catch clicks on sidebar navigation links and handle them
        $('.bs-sidebar li a').on('click', function(evt){
            // stop the default browser behaviour for the click 
            // on the sidebar navigation link
            evt.preventDefault();
            // get a handle on the target element of the clicked link
            var $target = $($(this).attr('href'));
            // manually scroll the window vertically to the correct
            // offset to nicely display the target element at the top
            $(window).scrollTop($target.offset().top-(scrollTopOffset));
        });

scrollTopOffset 変数は、アイテムがスクロールされる一番上までの距離を決定します。おそらく、ページ レイアウトに応じて値の計算を微調整する必要があります。上記の例では、ページ上部のメイン ナビゲーション バナーの高さを使用し、「見た目が良い」という理由で 50 ピクセルを追加しました。

上記のスニペットを追加する以外に、HTML を変更したり、scrollspy 機能を初期化する方法を変更したりする必要はありません。

私にとっては、Bootstrap v3.0.0 でかなりうまく動作します。これが他の人にも役立つことを願っています!

于 2013-10-10T05:12:59.827 に答える