Question

我有一个带有徽标的标头。仅当网站已滚动时，此徽标才应显示。

我在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>

Answer 2

尝试这个

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 5) {
    $(".below-top-header").addClass("show-class");
  } else {
    $(".below-top-header").removeClass("show-class");
  }
});

.content {
  height: 500px;
}

.show-class {
  position: fixed;
  display: block !important;
}

.hide-class {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="below-top-header hide-class">
    Image
  </div>
</div>

Answer 3

不幸的是，我认为您必须使用一些JavaScript才能使其按需运行。

下面是一个简单的代码片段，展示了我使用的原理：

从html中已有徽标开始，但CSS内有display: none，
向下滚动页面（即window.addEventListener('scroll', callback)）时，使用display: none将display: block更改为document.documentElement.scrollTop > 0。

var logo = document.getElementById('logo');

window.addEventListener('scroll', function(e) {
  if (document.documentElement.scrollTop > 0) {
        logo.style.display = 'block';
  }else logo.style.display = 'none';
});

#logo {
  display: none;
  position: fixed;
  top: 0;
  background: #aaa;
}

#page {
  background: #ddd;
  height: 2000px;
}

<div id='logo'><img src='http://placekitten.com/200/50'></div>
<div id='page'>Start of page<br>Try to scroll down</div>

希望有帮助。

Answer 4

您需要在窗口中添加scrollListener以便在用户滚动时执行代码。您的代码仅在页面加载时执行。

事件监听器的信息：https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener

window.addEventListener('scroll', function(e) {
    //do something as soon as the window was scrolled
});

请注意，每次用户滚动时都会触发该事件。

如果网站已滚动，则显示徽标

4 个答案: