Question

我的目标是在标题滚动过去后让菜单栏粘在视口的顶部。

我已经使用这个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的解决方案，并根据需要进行upvote / accept。

Answer 1

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

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

如果你愿意的话，你也可以同时做这两件事。

Answer 2

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

不使用变量内部条件if( $(window).scrollTop() > stickyHeaderTop ) {
尝试更改css()函数的顺序，如下所示：

$（'＃stickyAlias'）。css（'display'，'block'）;

$（'＃stickyMenu'）。css（{position：'fixed'，top：'0px'}）;

我在构建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.

Answer 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);

在Chrome中制作粘性菜单栏时遇到问题

3 个答案: