jquery - 使粘性菜单栏在 Chrome 中工作时出现问题

Question

我的目标是一旦标题滚动过去，菜单栏就会粘在视口(viewport)的顶部。

我使用这个 jQuery 来实现此目的，并使用以下代码来修改菜单栏到达顶部时的 css:

jQuery(document).ready(function($){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyMenu').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyMenu').css({position: 'fixed', top: '0px'});
                    $('#stickyAlias').css('display', 'block');
                } else {
                    $('#stickyMenu').css({position: 'static', top: '0px'});
                    $('#stickyAlias').css('display', 'none');
            }
    });
});

这是我的开发页面，其中包含我的工作示例:http://dev.harryg.me/serge/home/

在 Firefox 中它可以正常工作，但在 Chrome 中却存在问题； css 更改似乎比应有的更早生效 - 仅向下滚动几个像素后，菜单栏就变得固定并粘在顶部。我有一种感觉应该归咎于标题图像，但无法弄清楚为什么......

编辑: 感谢您的所有建议。由于我离开了我的开发设置，我将不得不等待审核您的所有建议。正如 Explosion Pills 和 Malk 所说，问题是因为 stickyHeaderTop 是在加载标题图像之前计算的。这就是为什么它在图像被缓存后起作用，但在刷新页面时不起作用。 我稍后会尝试爆炸丸的解决方案，并根据需要投票/接受。

Answer 1

问题在于，当您首次计算 stickyHeaderTop 时，顶部的图像未渲染，并且布局中未考虑其高度。 。有两种解决方案(都很简单):

1. 添加正确的width和height属性 <img>在顶部(在 <a id="home_link"> 内)。不管怎样，这样做是个好主意。
2. 不计算stickyHeaderTop最初。相反，进行比较 $(window).scrollTop() > $("#stickyMenu").offset().top 。难以察觉的效率下降值得精确计算。

如果你愿意，你也可以两者都做。