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

时间：2018-11-21 15:43:53

标签： javascript html css

所以我的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做到这一点？

3 个答案:

答案 0 :(得分：0)

一旦用户开始滚动，就可以通过修改div的opacity属性来实现所需的功能。另外，这是working example和onscroll的引用：） 

// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
  // grab the div we want to hide
  let toHide = document.getElementById('toHide');
  // fade the div above out by setting its opacity to 0
  toHide.style.opacity = 0;
}
html {
  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 500ms ease-in-out;
}
<html>

<head>
  <link rel="stylesheet" href="index.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>

<body>
  <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>
</body>

</html>

另一方面，由于您提到要使div成为用户在页面加载时首先看到的内容，因此您可以执行以下操作，以便在用户再次滚动回到顶部时重新出现： 

// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
  // grab the div we want to hide
  let toHide = document.getElementById('toHide');
  // fade the div above out by setting its opacity to 0
  // if the user scrolled down, scrollY will be greater than 0
  if(window.scrollY > 0){
    toHide.classList.add('hide');
  }
  else{
    toHide.classList.remove('hide');
  }
}
html {
  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 500ms ease-in-out;
}

.hide {
  opacity: 0;
}
<html>

<head>
  <link rel="stylesheet" href="index.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>

<body>
  <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>
</body>

</html>

以下是上述代码段的working example和对scrollY的引用。

第二个示例还使用css类（.hide），而不是仅使用纯JS修改所涉及的属性。分别使用toHide div的classList属性的addClass和removeClass方法动态添加和删除该类。

答案 1 :(得分：0)

我建议应用滚动侦听器，将CSS类放在您的叠加层div上，从而导致淡入淡出过渡：

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>

请确保还应用pointer-events: none;，否则该元素将是不可见的，但由于仍在其中，因此无法对其进行“点击”。

答案 2 :(得分：0)

最简单的方法是添加以下内容：

-> ping "8.8.8.8"
-> cmd    
[vxWorks]# ping 8.8.8.8
[vxWorks]# C
->

这是一个jsfiddle：https://jsfiddle.net/phv6Lfun/

相关问题
最新问题