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

Question

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

我在 javascript 中试过这个:

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

但这没有用。

如何实现？

Answer 1

使用 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>