jquery - 固定标题问题 - addClass 在页面加载时不起作用

Question

我正在尝试构建一个隐藏的标题，一旦我将网页滚动到 100 像素以下，它就必须出现。 header 包含也必须隐藏的 Logo 。问题是在页面加载时，所有内容都被隐藏，但在滚动时只出现头部， Logo 仍然丢失。但是，如果我在距离顶部低于 100 像素时刷新页面，即使我回到顶部， Logo 也会出现并且工作正常。

请您解释一下问题背后的原因，因为我找不到任何合适的解决方案。

HTML

<header>
    <a id="logo" href="index.html"></a>
</header>

CSS

header{
    position: fixed;
    top: -50px;
    left: 80px;
    height: 50px;
    width: 100%;
    background: rgba(255,255,255, 0.9);
    z-index:9999;
    transition: all 0.3s ease-in-out;
}
header.show{
    top:0;
}

a#logo{
    display: block;
    position:absolute;
    top: inherit;
    left: -80px;
    width: 80px;
    height: 50px;
    background: url('images/logos/logo.svg');
}

JQuery

$(document).ready(function(){
    $(window).scroll(function(){
        if($('body').scrollTop() > 100){
            $("header").addClass('show');
        }
        else{
            $("header").removeClass('show')
        }

    });
});

Answer 1

现在您的滚动事件处理程序中只有逻辑。要在滚动事件和加载页面中添加逻辑，请将您的逻辑替换为如下函数:

var checkScroll = function() {
    if($('body').scrollTop() > 100){
        $("header").addClass('show');
    }
    else{
        $("header").removeClass('show')
    }
}

现在将您的 javascript 更改为:

$(document).ready(function(){
    checkScroll();
    $(window).scroll(function(){
        checkScroll();
    });
});