引導詞綴導航欄無法檢測到圖像高度

Question

當我粘貼位於標題元素下方的導航欄元素時，導航欄會過早粘貼，就好像標題中的圖像不存在一樣。

導航欄應該在導航欄到達頂部（而不是更早）時貼上。 我為此使用的代碼將偏移量設置為導航欄的滾動位置，但是問題是，此位置的計算方式就像標題中的圖像不存在一樣。

我嘗試在圖像周圍放置p標簽，將圖像高度顯式設置為固定高度以及自動將圖像高度設置為固定高度，並將display屬性設置為每個可能的值，但無濟於事。 我沒有在標題中浮動圖片。 當我在標題中添加額外的文本行時，導航欄會附加到該高度（導航欄的后綴的偏移高度會檢測到文本的高度，但不會檢測到圖像的高度）。

---

*編輯：小提琴工作正常（這是所需的行為）。 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);

---

**編輯：但是我的本地主機的行為有所不同，如屏幕截圖所示。

我認為問題可能是圖像是在Rails的資產管道中最后（在導航欄部分之前）加載的……並且導航欄在js代碼中的偏移位置是在渲染圖像之前計算的……而在JS小提琴中，它沒有這個問題。

如果/我應該推遲運行javascript代碼，以便在加載所有圖像后運行它嗎？

Answer 1

解！

問題是javascript在圖像加載之前就已運行（從而導致在圖像出現之前已計算出偏移位置）。 解決的方法是在其他所有內容加載完畢后通過更改我的coffee腳本的最后兩行來加載javascript：

ready = ->
$('.affixable').affix({
        offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(document).ready(ready);
$(document).on('page:load', ready);

至

ready = ->
$('.affixable').affix({
        offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(window).load(ready);
$(window).on('page:load', ready);

我不知道這是否會在heroku或其他服務器上發生，但是它確實有助於確保不會通過使用后者的代碼來實現。

---