Question

我在浏览主页后以及内容开始时尝试在标题中显示徽标的缩略图版本。我回到主页后，我也希望它再次消失。我尝试过一些JavaScript，但是如果有人对如何修复它有任何反馈或建议。我向JSFiddle添加了一些代码以寻求帮助。

HTML

<header>
    <img src="img.png" id="logo" />
</header>

<div id="mainPage">
    <img src="img.png" />
</div>

<div id="main">
    This is the content page.
</div>

CSS

header {
    background-color: blue;
    width: 100%;
    height: 20px;
    position: fixed;
    top: 0;
    border-bottom: 1px solid white;
}

#mainPage {
    margin: 0;
    padding: 0;
    background-color: blue;
    height: 500px;
}
#mainPage img {
    width: auto;
    display: block;
    margin: 0 auto;
}
#main{
    height: 500px;
}

#logo {
    visibility: hidden;
}

JS

function showImg() {
    var img = document.getElementById('logo');
    var h = window.innerHeight;
    if(h < 600) {
        img.style.visibility = 'hidden';
    }
    else {
        img.style.visibility = 'visible';
    }
}

http://jsfiddle.net/nkjqLyfg/2/

Answer 1

正如您在my fork of your fiddle中所看到的，您只需要将您的函数设置为scroll事件的处理程序。此外，不同的浏览器具有表达当前滚动位置的不同方式。以下内容适用于Chrome：

function showImg() {
    var img = document.getElementById('logo');
    var scrollY = window.scrollY;
    if(scrollY < 600) {
        img.style.visibility = 'hidden';
    }
    else {
        img.style.visibility = 'visible';
    }
}

document.addEventListener("scroll", showImg);

如何在主页面后显示图像

1 个答案: