如何在主页后显示图像

How to display an Image after the main page

本文关键字：显示 显示图 图像 主页      更新时间：2023-09-26

我试图在经过主页和内容开始时在标题中显示徽标的缩略图版本。我也希望它再次消失，一旦我回到主页。我已经尝试了一些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/

正如您在我的小提琴分支中看到的那样，您只需要将函数设置为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);
相关文章：