引导词缀导航栏不检测图像高度答案

【问题标题】：bootstrap affix navbar doesn't detect image height引导词缀导航栏不检测图像高度
【发布时间】：2014-06-17 16:29:03
【问题描述】：

当我添加位于标题元素下方的导航栏元素时，导航栏会过早添加，就好像标题中的图像不存在一样。

导航栏应该在导航栏到达顶部时附加，而不是更早。我用于此的代码将偏移量设置为导航栏的滚动位置，但问题是，这个位置的计算就像标题中的图像不存在一样。

我尝试在图像周围放置 p 标签，将图像高度显式设置为固定高度以及自动，将显示属性设置为每个可能的值，但无济于事。我没有在标题中浮动我的图像。当我在标题中添加额外的文本行时，导航附加到该高度（导航栏附加的偏移高度检测文本的高度，但不检测图像）。

*edit：小提琴工作正常（这是所需的行为）。 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);

**edit：但我的本地主机的行为不同，如屏幕截图所示。

我认为问题可能是图像在rails的资产管道中最后加载（在导航栏部分之前）......并且js代码中导航栏的偏移位置是在图像渲染之前计算的......而在JS fiddle，没有这个问题。

如果/我应该如何推迟运行 javascript 代码，以便在加载所有图像后运行？

【问题讨论】：

代码或Fiddle 或者它没有发生。
heroku 应用的实际链接稍后会出现。
专业提示：对于 JavaScript 或 CSS 问题，纯 HTML 是可行的方法。可能具有帮助您的专业知识的 JS 或 CSS 专家可能不熟悉 HAML（或 ASP、PHP、JSP 等）。
您不必重构代码。在浏览器中“查看源代码”即可。
太棒了！现在将其作为答案发布并接受它，而不是将其作为问题的一部分。这样，您将帮助其他人寻找偶然发现此帖子的类似问题。

标签： javascript css twitter-bootstrap affix

【解决方案1】：

解决方案！

问题在于 javascript 在图像加载之前就已运行（从而导致在图像出现之前计算出偏移定位）。解决方案是通过更改我的咖啡脚本的最后两行来加载其他所有内容后加载 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 或其他服务器上，但它确实有助于确保它不会通过使用后一个代码来代替。

【讨论】：