使用javascript创建另一个元素后，如何使一个元素消失。滚动触发？

Question

我在向下滚动时会出现在标题中的元素中有文本。

但是我还想让页面的第一部分同时消失。所以我在同一个滚动点设置了javascript。这是一个小功能，我不想依赖任何库。所以请简单的javascript解决方案建议。

HTML

<header class="header-home">
  <div>
    Company
  </div>
  <span class="header-copy">
    is so awesome
  </span>

  <button></button>  
</header>

<!-- test content -->
<section class="landing-bg">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
</section> 

的Javascript

我从最顶层的代码开始，所有工作正常，以便在滚动300px时显示header-copy中的文本。

var span = document.querySelectorAll('.header-home .header-copy')[0];

span.style.display = "none";

document.addEventListener("scroll", function() {
  if (document.body.scrollTop > 300) {
    span.style.display = "inline-block";
  }
  else {
    span.style.display = "none";
  }
});

但后来我想让我页面的第一部分消失。

/* makes the top content go away */

var content = document.getElementsByClassName("landing-bg")[0];

content.style.display = "block";

document.addEventListener("scroll", function() {
  if (document.body.scrollTop > 300) {
    content.style.display = "none";
  }
  else {
    content.style.display = "block";
  }
});

CodePen

上提供完整演示

Answer 1

我最终嵌套代码并验证类名。回答这个问题而不是删除以防万一有人可以使用此代码作为示例。

的Javascript

/* Allows you to select a class within a class */
var span = document.querySelectorAll('.header-home .header-copy')[0];
span.style.display = "none";

/* you can select an element with a specific class*/
var content = document.getElementsByClassName("landing-bg")[0];
content.style.display = "block";

document.addEventListener("scroll", function() {
  /* edit to the scroll point that you need */
  if (document.body.scrollTop > 300) {
    span.style.display = "inline-block";
    content.style.display = "none";
  }
  else {
    content.style.display = "block";
    span.style.display = "none";
  }
});