gpt4 book ai didi

javascript - 如果网站已滚动,则显示 Logo

转载 作者:太空宇宙 更新时间:2023-11-03 21:07:32 24 4
gpt4 key购买 nike

我有一个带有 Logo 的标题。只有在滚动网站时才会显示此 Logo 。

我在 javascript 中试过这个:

if(document.getElementById("div").scrollTop != 0){
document.write("<img src='logo.jpg'>");
}

但这没有用。

如何实现?

最佳答案

使用 window.addEventListener('scroll', callback) 然后将值 "block" 设置为 img 的属性。

window.addEventListener('scroll', function(e) {
if (document.getElementsByTagName("html")[0].scrollTop > 5) {
document.getElementsByClassName('imgHeader')[0].style.display = "block";
} else {
document.getElementsByClassName('imgHeader')[0].style.display = "none";
}
});
.imgHeader {
height: 100px;
width: 100px;
display: none;
}

div {
height: 1000px;
}

header {
position: fixed;
top: 0;
width: 100%;
}
<header><img class="imgHeader" src="https://material.angular.io/assets/img/examples/shiba1.jpg" /></header>
<div></div>

关于javascript - 如果网站已滚动,则显示 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51082792/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com