使粘性菜单栏在 Chrome 中工作的问题答案

【问题标题】：Trouble with making a sticky menu bar work in Chrome使粘性菜单栏在 Chrome 中工作的问题
【发布时间】：2013-01-31 17:17:43
【问题描述】：

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

我已经使用这个 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 是在加载标题图像之前计算的。这就是为什么它在图像被缓存后起作用，但如果你刷新页面则不起作用。我稍后会尝试 Explosion Pills 的解决方案，并根据需要投票/接受。

【问题讨论】：

尝试 .position().top 代替
您的网站在 Chrome 中运行良好。也许你已经修好了。
@Malk 你确定吗？我在 Chrome 中也无法正确工作
是的，这很奇怪。一开始并没有，但我在滚动函数中设置了一个断点只是为了观察值并且它开始工作。我转储了该网站的浏览历史记录，它仍然可以正常工作。
@harryg 这是一个很长的镜头，但请更新您的 html 以使 #home_link img 具有宽度/高度，如 <img src="http://sergedenimes.com/wp-content/uploads/2012/09/Top22.jpg" alt="Serge Dev" width="565" height="175">

标签： jquery html css google-chrome

【解决方案1】：

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

将正确的width 和height 属性添加到顶部的<img>（<a id="home_link"> 内部）。无论如何，这样做是个好主意。
最初不计算stickyHeaderTop。而是进行比较$(window).scrollTop() > $("#stickyMenu").offset().top。效率的不明显下降值得准确计算。

如果你愿意，你也可以两者兼得。

【讨论】：

这解释了为什么在缓存图像后问题似乎消失了。

【解决方案2】：

我在同一问题上处理过 chrome，可能有两种可能导致此错误：

不使用条件内的变量if( $(window).scrollTop() > stickyHeaderTop ) {
尝试像这样更改css() 函数的顺序：

$('#stickyAlias').css('display', 'block');

$('#stickyMenu').css({position: 'fixed', top: '0px'});

我在 1 年前构建 this site. 时遇到了这些问题

如果两者都不起作用，请尝试以下方式：

Here is working jsFiddle.

$(window).scroll(function() {

   var headerH = $('.header').outerHeight(true);
   console.log(headerH);
   //this will calculate header's full height, with borders, margins, paddings

   var scrollVal = $(this).scrollTop();
    if ( scrollVal > headerH ) {
        $('#subnav').css({'position':'fixed','top' :'0px'});
    } else {
        $('#subnav').css({'position':'static','top':'0px'});
    }
 });

Source.

【讨论】：

非常明智的方法

【解决方案3】：

我认为 document.ready 事件在渲染完成之前触发。尝试订阅窗口的load 事件而不是文档的ready 事件。比如：

function scrollSpy(){
// 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');
            }
    });
}
window.addEventListener('load', scrollSpy, false);

【讨论】：