Question

我正在尝试构建一个隐藏的标题，一旦我将网页滚动到100px以下就必须出现。标题包含必须隐藏的徽标。问题是，在页面加载时，所有内容都必须隐藏，但是在滚动时只显示头部，徽标仍然缺失。但是如果我从顶部低于100px刷新页面，则徽标会出现，即使我重新登上也能正常工作。

请你解释一下这个问题可能是什么原因，因为我找不到合适的解决方案。

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();
    });
});

Answer 2

我不认为给出的答案是正确的：）

问题是inherit a#logo

的top值

a#logo{
    display: block;
    position:absolute;
    top: 0; /*make it 0, and it will work*/
    left: -80px;
    width: 80px;
    height: 50px;
    background: url('images/logos/logo.svg');
}

Answer 3

从top: inherit;移除a#logo并使用他的JS

function showHeader() {
    if ($('body').scrollTop() > 100) 
        $("header").css('top', '0px');
    else 
        $("header").css('top', '-50px')
}
$(document).ready(function () {
    showHeader();
    $(window).scroll(function () {
        showHeader();
    });
});

修复了标题问题 - addClass在页面加载时不起作用

3 个答案: