ヘッダー要素の下にある navbar 要素を追加すると、ヘッダー内の画像が存在しないかのように、navbar が途中で追加されます。
ナビゲーションバーは、ナビゲーションバーが一番上に達したときに固定されるはずです。これに使用したコードは、オフセットをナビゲーションバーのスクロール位置に設定しますが、問題は、この位置がヘッダー内の画像が存在しないかのように計算されることです。
画像の周りに p タグを付けてみました。画像の高さを固定の高さと自動に明示的に設定し、表示プロパティを考えられるすべての値に設定しましたが、役に立ちませんでした。ヘッダーに画像を浮かせていません。ヘッダーに追加のテキスト行を入れると、ナビゲーションはその高さに固定されます (ナビゲーションバーの固定のオフセット高さはテキストの高さを検出しますが、画像は検出しません)。
*編集: フィドルは正常に動作します (これは望ましい動作です)。 http://jsfiddle.net/gwho/8sAYW/ (このフィドルは何らかの理由で問題のある動作を示していません)。
coffeescript の JS
ready = ->
$('.affixable').affix({
offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(document).ready(ready);
$(document).on('page:load', ready);
**編集: スクリーンショットに示すように、ローカル ホストの動作が異なります。
問題は、画像がレールのアセット パイプラインで最後に (navbar パーシャルの前に) 読み込まれることである可能性があると思います... js コードの navbar のオフセット位置は、画像がレンダリングされる前に計算されます... 一方、JS フィドルでは、この問題はありません。
すべての画像がロードされた後に実行されるように、JavaScriptコードの実行を延期する必要がある場合/どのようにすればよいですか?