web-dev-qa-db-ja.com

Bootstrap 3-サイドバー付きのスクロールスパイ

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>
jquerytwitter-bootstraptwitter-bootstrap-3scrollspy
11
mccannf

結局、あなたの質問は重複していないようです。次のようなものを試すことができます： http://bootply.com/82265

サブナビゲーションのリンクをクリックすると、コンテンツはナビゲーションバーの後ろに非表示になります。私はあなたのコンテンツアイテムを追加のdivでラップしました。これを行うことで、パディングトップを追加できます。パディングにより、h2が表示されます。

_var clicked = false;
$('#mynav li a').click(
function(){
    $('#mycontent > div > h2').css('padding-top',0);
    $($( this ).attr('href') + ' > h2').css('padding-top','50px');
    clicked = true;
    }
);  

$('body').on('activate.bs.scrollspy', function () {
   if(!clicked)$('#mycontent > div > h2').css('padding-top',0);
  clicked = false;
})
_

私が見つけた問題は、パディングトップを元に戻す方法でした。パディングが追加された後、接辞がスクロールイベントをトリガーするため、スクロールイベントを使用できませんでした。 'activate.bs.scrollspy'で元に戻すは機能しているようです。

ブートプライでは、スクロールスパイを$('body').scrollspy({ target: '#sidebar', offset:80 });で追加します。_<body data-spy="scroll" data-target="#sidebar">_も使用できます。スクロールスパイオフセットの正しい値が何になるかわかりません。 70はうまくいくようです。

最後のコンテンツアイテムまでの最小の高さにも注意してください。そうしないと、最後の2つのアイテムをスクロールできません。

上記は、実際の答えというよりも、ある種の概念実証になると思います。

[〜＃〜] note [〜＃〜]Bootstrapのドキュメントにも同じ問題があります。デフォルトでトピック間に空白を追加することでこれを修正しました。以下を参照してください。

enter image description here

追加の空白がdocs.cssに追加されます：

_h1[id] {
    margin-top: -45px;
    padding-top: 80px;
}
_

参照： https://github.com/twbs/bootstrap/issues/1067

13
Bass Jobsen

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

        // 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を変更したり、スクロールスパイ機能を初期化する方法を変更したりする必要はありません。

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

1
user2865538