フローティングイメージが乱れるブートストラップScrollspy

ブートストラップを使用してページを設定しました。（http://ethnoma.org/about.html）サイドバーのナビゲーションが添付されています（これは素晴らしい）。また、このナビゲーションではブートストラップscrollspyを使用しており、ナビゲーション内のすべてのリンクは同じページ内にあります（ancorsを使用）。すべてがうまくいきました（滑らかなスクロールプラグインが追加されていても）。すべてのコンテンツがページに追加された後でScrollspyを強制的に更新するようにこのスクリプトを呼び出すだけでした（私は<head>に入れました）。フローティングイメージが乱れるブートストラップScrollspy

<script type="text/javascript"> 
// ScrollSpy 
$(function() { 
    $('[data-spy="scroll"]').each(function() { 
     var $spy = $(this).scrollspy('refresh') 
    }); 
}); 
</script>

クライアントからページに画像を追加するように求められました。私は、次のようにブートストラップのマークアップとCSSクラスを使用した：親（この場合は）右に「」タグフロートを行い、ブロック要素にIMGを作る

<a class="pull-right pad5" href="#"> 
    <img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/> 
</a>

を。

問題は、これらの浮遊画像がページを元のサイズよりも長くする問題です。しかし、Scrollspyはまだアクティブなリンクを同じ場所で切り替えています。これにより、scrollpyは現在のページよりもページのさらに遠いコンテンツのリンクをアクティブにします。

IDのアンカーリンクの場所を計算するときに、スクロールした画像を考慮して強制的に浮動画像を考慮する方法は紛失しています。どのように私はこれを修正することができるアイデアを持っていますか？次のページで問題を確認することができますhttp://ethnoma.org/about.html

出典

2013-04-02 Guategeek

BootstrapからScrollspyを使用しようとしているときにこの問題を抱えていましたが、計算中にスクリプトが画像の高さを考慮していないようですScrollspyが正確になるようにします。

これは画像の高さが設定されていないためです。ページを調べると、ページに含まれているフローティングイメージの高さがの自動に設定されていて、CSSでメディアクエリを実行した後に特定の値に設定したとき、私のScrollspyは完全に動作していました。

出典

2013-09-03 08:46:57

私はこの問題に直面していましたので、誰かがこのバインドで自分自身を見つけた場合には、私はいくつかの説明と解決策を提供すると思いました。

まず、scrollspyが正しく動作しています。ページ上のさまざまな要素のオフセットを計算する時点で、イメージはまだロードされていないので、有効な高さは0です。後で、イメージが読み込まれると、ブラウザはそのネイティブディメンションを決定し、ページレイアウトを再計算し、イメージでページを再ペイントします。ただし、scrollspyは、ページが再描画されたことを完全に意識していないため、無効なオフセットが引き続き使用されます。

すべての画像がロードされた後にscrollspyを更新すると、オフセットが正しいことがわかります。ですから、これをどうやって行うのかという疑問があります。

解決策の1つは、すべてのイメージにonLoadイベントハンドラを添付し、ハンドラ内でscrollspyをリフレッシュすることです。簡略化されたアプローチは、次のようになります。

<script type="text/javascript"> 
    function refreshScrollspy() { 
     $('[data-spy="scroll"]').each(function() { 
      $(this).scrollspy('refresh'); 
     }); 
    } 
    $(function() { 
     refreshScrollspy(); 
    }); 
</script> 

<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>

ここworking jsfiddle exampleです。イメージのロードハンドラは、イメージが実際にロードされる前に登録されていなければならないことに注意してください。さもなければ、それは解雇されません。だから私はここでインラインイベントハンドラを使用しています。より洗練されたソリューションが読者に残されています。

出典

2014-12-04 04:00:07

フローティングイメージが乱れるブートストラップScrollspy

答えて

関連する問題