20

これに関するいくつかの関連する質問を読む$.affix('refresh')と、twitter ブートストラップ接辞コンポーネントに使用できる方法がまったくないことがわかります。私の問題は、関連していますが、単に更新する間の追加のステップでさえある可能性があります。説明してみましょう。

標準のブートストラップ ナビゲーション バーを含むページがあります。その下に、ユーザーが x ピクセルを超えてスクロールすると「固定」されるサブナビゲーションを貼り付けます (私の場合、ナビゲーションバーの高さは 41px であるため、41px で貼り付けが開始され、.affix クラスを.affix {top:41px}すべてに変更することでうまくいきます) )

したがって、この最初の接辞では、html のみの属性を使用できます。

ページのさらに下（本質的に「2番目のページ」と見なすことができます）別のナビゲーションがあり、ユーザーが特定の位置にスクロールすると、最初のサブナビゲーションを「貼り付け」て置き換える必要があります-2番目の場所が与えられた場合ページ/接辞は、コンテンツのために可変です。jsを使用して最初のページの高さを計算し、offset: {top:xxx}取得したものに基づいて設定します。

これもうまく機能します/ユーザーが少し下にスクロールすると、最初のサブナビゲーションの接辞が作動し、スクロールを続けてページのさらに下にある2番目のサブナビゲーションに到達すると、最初の接辞のサブナビゲーションが置き換えられます-nav (実際にはそれ自体を置き換えるのではなく、より高い z-index でオーバーレイします)

ここから、解決策を見つけることができなかった2つの問題があります。

  1. ユーザーがウィンドウのサイズを変更すると、もちろん最初のページのコンテンツが長くなり、ページの下の添付ファイルの元のオフセット上部の寸法が変更されます。最初に、.affix('refresh')would/could への単純な呼び出しが解決策になると考えましたが、もちろん、このメソッドはコンポーネントでも使用できません。次に、手動で高さを再計算して再作成できると思い$('.my-second-affix').affix({offset: {top:x-new-offset}});ましたが、何らかの理由でこれがまったく機能していないようで、理由がわかりません:(

  2. 次に取り組むべき問題は、jqueryのinfinitescrollを使用してさらに多くのページをロードしていることです...各ページには、さまざまな段階で他のサブナビゲーションがあり、最後の接辞が現在あるものを貼り付けて置き換えたいと考えています頂点で。

また、ユーザーが逆方向にスクロールした場合、以前に固定されていたサブナビゲーションが逆方向に再固定されることを確認したいと思います(これは、固定オフセットが正しい限り問題ないと思われます)。

うまくいけば、この説明が私の問題を強調するのに十分であり、誰かが以前にこれに対処したか、解決策に向けたガイダンスを提供できることを願っています. オフセットを上からの現在のオフセットも返す関数にしようとしましたが (別の質問で述べたようにTwitter ブートストラップ変更接辞オフセット)、何らかの理由で期待どおりに動作しません。

どんな助けでも大歓迎です

4

4 に答える 4

1

この質問はかなり古いですが、他の誰も答えていないので...

私は接辞で同様の問題を抱えていました。これが私がそれを解決した方法です。

$('.affixed-elements').each(function() {
   var topOffset = 0; //calculate your top offset here
   var $container = //Set this to the element's container;
   $(this).affix({
      offset: {
         top: function() {
            return $container.offset().top - topOffset;
         },
         bottom: function() {
            return $('body').height() - ($container.offset().top+$container.outerHeight());
        }
      }
   });
});

これらの設定は、ウィンドウのサイズが変更された後でも、添付された要素をそのコンテナーの境界内に保持する必要があります。

于 2016-03-25T21:19:45.457 に答える
0

このようにコード自体でオフセットを使用することをお勧めします<div class="col-md-offset-6">。

于 2016-03-12T15:59:55.067 に答える