javascript - 使用纯JS滚动时如何隐藏div？

Question

所以我有一个覆盖我整个网页的 div。在它下面我还有一组 div。我希望能够在向下滚动时隐藏我的 div，以便它下面的其他 div 可以开始出现。

现在的 div 是黑色的，具有绝对位置。我希望这个 div 成为用户看到的第一页，然后当用户向下滚动并且它下面的其他 div 出现时它开始隐藏。

这是我的html：

body {
  margin: 0;
  border: 0;
  background-color: #201e2f;
}

p {
  text-align: justify;
  margin: 0;
  font-family: Ubuntu;
  text-transform: uppercase;
  text-indent: 30px;
  line-height: 1.5;
  font-size: 15px;
}

#parentContainer {
  background-color: #ffc107;
  height: 250px;
  width: 500px;
  float: left;
}

#courseImage {
  height: 100%;
  width: 30%;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}

#courseDescription {
  height: 100%;
  width: 70%;
  float: right;
  box-sizing: border-box;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}

button {
  height: 50px;
  width: 120px;
  background-color: #201e2f;
  margin: 15px;
  border: 0;
  color: #ffc107;
  border-radius: 5px;
  float: right;
  font-family: Ubuntu;
  font-size: 15px;
}

img {
  float: left;
  height: 100%;
  width: 100%;
}

#wrapper {
  display: grid;
  grid-gap: 20px 20px;
  grid-template-columns: 500px 500px;
  justify-content: center;
}

.class1 {
  border-top-left-radius: 10px;
}

.class2 {
  border-top-right-radius: 10px;
}

.class6 {
  border-bottom-right-radius: 10px;
}

.class5 {
  border-bottom-left-radius: 10px;
}

#toHide {
  background-color: black;
  height: 100%;
  width: 100%;
  position: absolute;
}

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
  <div id="parentContainer" class="class1">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">Start Learning!</button>
    </div>
  </div>

  <div id="parentContainer" class="class2">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                Start Learning!
                            </button>
    </div>
  </div>

  <div id="parentContainer">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                Start Learning!
                            </button>
    </div>
  </div>

  <div id="parentContainer">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                Start Learning!
                            </button>
    </div>
  </div>

  <div id="parentContainer" class="class5">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                    Start Learning!
                                </button>
    </div>
  </div>

  <div id="parentContainer" class="class6">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                    Start Learning!
                                </button>
    </div>
  </div>
</div>

我怎么能用纯 JS 或 CSS 做到这一点？

标签： javascripthtmlcss

Answer 1

我建议应用一个滚动监听器，在你的覆盖 div 上放置一个 CSS 类，这会导致淡入淡出过渡：

document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});

body {
  margin: 0;
  border: 0;
  background-color: #201e2f;
}

p {
  text-align: justify;
  margin: 0;
  font-family: Ubuntu;
  text-transform: uppercase;
  text-indent: 30px;
  line-height: 1.5;
  font-size: 15px;
}

#parentContainer {
  background-color: #ffc107;
  height: 250px;
  width: 500px;
  float: left;
}

#courseImage {
  height: 100%;
  width: 30%;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}

#courseDescription {
  height: 100%;
  width: 70%;
  float: right;
  box-sizing: border-box;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}

button {
  height: 50px;
  width: 120px;
  background-color: #201e2f;
  margin: 15px;
  border: 0;
  color: #ffc107;
  border-radius: 5px;
  float: right;
  font-family: Ubuntu;
  font-size: 15px;
}

img {
  float: left;
  height: 100%;
  width: 100%;
}

#wrapper {
  display: grid;
  grid-gap: 20px 20px;
  grid-template-columns: 500px 500px;
  justify-content: center;
}

.class1 {
  border-top-left-radius: 10px;
}

.class2 {
  border-top-right-radius: 10px;
}

.class6 {
  border-bottom-right-radius: 10px;
}

.class5 {
  border-bottom-left-radius: 10px;
}

#toHide {
  background-color: black;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: opacity .3s ease-in-out;
  opacity: 1;
}

#toHide.hiddenByScroll {
  opacity: 0;
  pointer-events: none;
}

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
  <div id="parentContainer" class="class1">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">Start Learning!</button>
    </div>
  </div>

  <div id="parentContainer" class="class2">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                Start Learning!
                            </button>
    </div>
  </div>

  <div id="parentContainer">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                Start Learning!
                            </button>
    </div>
  </div>

  <div id="parentContainer">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                Start Learning!
                            </button>
    </div>
  </div>

  <div id="parentContainer" class="class5">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                    Start Learning!
                                </button>
    </div>
  </div>

  <div id="parentContainer" class="class6">
    <div id="courseImage">
      <img src="wd.png" alt="Sorry, couldn't load image">
    </div>

    <div id="courseDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
      </p>

      <button id="startButton">
                                    Start Learning!
                                </button>
    </div>
  </div>
</div>

确保也 apply pointer-events: none;，否则元素将不可见，但不能“点击通过”，因为它仍然存在。