Question

当我向下滚动并在屏幕上出现“三个”部分时，我想显示“隐藏显示”部分。我想在向上滚动时隐藏“ hide_show”部分，而“三个”部分从屏幕上消失。我想使用具有“淡入/淡出”效果的JS。请帮助

.hide_show {
  height: 50px;
  background-color: #cfcfcf;
  margin-top: -50px;
}

#two {
  background-color: cyan;
}

#three {
  background-color: red;
}

#four {
  background-color: yellow;
}

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>

  <section class="hide_show">
    <div class="container">
      <div class="row">
        <div class="col-12">
          one
          
        </div>
      </div>
    </div>
  </section>
  
  <section id="two">
    <div class="container">
      <div class="row">
        <div class="col-12">
          two
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
      </div>
    </div>
  </section>
  
  <section id="three">
    <div class="container">
      <div class="row">
        <div class="col-12">
          three
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
      </div>
    </div>
  </section>
  
  <section id="four">
    <div class="container">
      <div class="row">
        <div class="col-12">
          four
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
      </div>
    </div>
  </section>
  
</body>

https://jsfiddle.net/czyjg2tu/1/

Answer 1

要完全理解这个问题有点困难，但这有望使您入门。

让我知道您是否对此部分还有其他疑问。

let three = document.querySelector('#three')
let hideShow = document.querySelectorAll('.hide_show')

document.addEventListener('scroll', () => {
  // If the user has scrolled to the three section
  if (window.pageYOffset >= three.offsetTop) {
    hideShow.forEach((item) => {
      item.style.display = 'block'
    })
    
  // If the user has not reached the three section
  } else {
    hideShow.forEach((item) => {
      item.style.display = 'none'
    })
  }
})

.hide_show {
  /* Force the hideShow section to always be at the top */
  position: sticky;
  top: 0;
  display: none;
  
  height: 50px;
  background-color: #cfcfcf;
  margin-top: -50px;
}

#two {
  background-color: cyan;
}

#three {
  background-color: red;
}

#four {
  background-color: yellow;
}

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>

  <section class="hide_show">
    <div class="container">
      <div class="row">
        <div class="col-12">
          one
          
        </div>
      </div>
    </div>
  </section>
  
  <section id="two">
    <div class="container">
      <div class="row">
        <div class="col-12">
          two
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
      </div>
    </div>
  </section>
  
  <section id="three">
    <div class="container">
      <div class="row">
        <div class="col-12">
          three
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
      </div>
    </div>
  </section>
  
  <section id="four">
    <div class="container">
      <div class="row">
        <div class="col-12">
          four
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
      </div>
    </div>
  </section>
  
</body>

滚动页面时显示/隐藏DIV

1 个答案: