3

scrollspy プラグインと接辞プラグインを正常に動作させることができましたが、ユーザーがページの下部までスクロールするたびに (小さなブラウザー ウィンドウを使用している場合)、接辞クラスが別のクラスと競合し始め、接辞が状態間でジャンプします。

ここで例を見ることができます: http://devng.sdss.org/results-science/

CSS は次のとおりです。

.affix-top,.affix{
  position: static;
}

#sidebar li.active {
   border:0 #eee solid;
   border-right-width:5px;
}
@media (min-width: 979px) {
   #sidebar.affix-top {
     position: static;
     margin-top:30px;
   }
   #sidebar.affix {
     position: fixed;
     top:70px;
   }

   #sidebar.affix-bottom {
    position: fixed;
    bottom: 400px;
   }

}

そしてJS：

$('#leftCol').affix({
           offset: {
             top: 235
             ,bottom: 400
           }
         });

         /* activate scrollspy menu */
         var $body   = $(document.body);
         var navHeight = $('.navbar').outerHeight(true) + 10;

         $body.scrollspy({
           target: '#leftCol',
           offset: navHeight
         });

答えは私の顔のすぐ前にあると思いますが、私はこれをずっと見つめていました。

4

5 に答える 5

1

これはかなり古い投稿ですが、今日この問題 (Boostrap 3.3.5) を通り過ぎて、同じことを経験しました。

私の簡単な解決策は、affixを実行するたびに呼び出すイベント「affixed.bs.affix」に「リセット」を添付することでした。

$().ready( function() {
  $("#nav").on("affixed.bs.affix", function(){

    $("#nav").attr("style","");

  });
});

手袋のように機能します

于 2015-11-22T22:52:18.530 に答える
1

ハッキングした後、私は最終的に私が望んでいた方法でインタラクションを取得しました。

affix-ingプロパティのスタイルは である必要があることがわかりましたtop: 0;。がaffix-bottom適用position: relative;されると、要素に適用されます。接辞が "affix-bottom" から に移行するとき、その接辞はaffix留まりposition: relative;、top: 0;元に戻されることはありません。というわけで、手動でやってます。

コードは次のとおりです。

$("#nav").on("affixed.bs.affix", function(){
  if($(this).hasClass('affix') && $(this).attr('style').indexOf('position: relative;') > -1) {
    $(this).attr('style', $(this).attr('style').replace('position: relative;', 'top: 0px;'));
  }        
});
于 2015-12-17T16:56:27.817 に答える
0

The problem is that when you scroll to within that 400px you set as the bottom it resets. A simple solution is to remove the offset bottom.

于 2016-03-28T21:09:54.493 に答える