1

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

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

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

*编辑：小提琴工作正常（这是所需的行为）。 http://jsfiddle.net/gwho/8sAYW/ （由于某种原因，这个小提琴没有表现出有问题的行为）。

咖啡脚本中的 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 代码，以便在加载所有图像后运行？

4

1 回答 1

0

解决方案！

问题是 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 或其他服务器上，但它确实有助于确保它不会通过使用后一个代码来代替。

于 2014-05-02T05:10:08.413 回答