2

scrollspy を使用して、必ずしも設計されていないことをしたいのですが、それでうまくいくかもしれません。

私は div を持っていて、それが一番上にスクロールしたときを検出し、そうするたびに何かをし#myTargetたいだけです。.container

HTML:

<div class="container" data-spy="scroll" data-target="#myTarget">
    <div class="row">
        <div class="col-md-12 some-content">.some content</div>
    </div>
    <div class="row">
        <div class="col-md-12" id="myTarget">#myTarget</div>
    </div>
</div>

JS:

$('body').scrollspy({
    target: '#myTarget'
});

$('#myTarget').on('activate.bs.scrollspy', function () {
    console.log('got to the target!');
});

ここにjsfiddleリンクがあります

PS jQuery Waypointsなどの他のプラグインを使用できることはわかっていますが、可能であれば Bootstrap だけに固執したいと思います。

4

2 に答える 2

2

ブートストラップ 3 ドキュメントによると:

以外の要素をスクロールスパイするときは<body>、必ず高さを設定し、overflow-y: scroll; 適用。

scrollspy が動作していることを確認したら、次の jquery コードを使用して、自分が上にいるかどうかを検出します。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
   var activeSection = $(this).find("li.active a").attr("href");

   if(activeSection === "#section1")
   {
       alert("I have reached to the top.");
   }
});

イベントにバインドし、activate.bs.scrollspyそれが実行されるたびにhref、現在選択されているアイテムを取得します。次に、そのhrefアイテムが html で定義された最初のアイテムであるかどうかを確認します。はいの場合、あなたはトップです。

私の動作中の JSFIDDLE の例を確認してください。

下にスクロールして再び上に戻ると、警告ボックスが表示され、一番上に到達したことが通知されます。

于 2015-08-24T21:33:35.873 に答える