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

Java腳本

我從最上面的代碼塊開始，當滾動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

我最終嵌套了代碼並驗證了類名。 回答這個問題，而不是刪除，以防萬一有人可以使用此代碼作為示例。

Java腳本

/* 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";
  }
});