逐步滚动

Question

我创建了一个具有不同背景颜色的滚动容器，并且滚动时这些颜色分别是fadeIn和fadeOut。但是我想逐步滚动，例如，当我滚动到第二张图片时，它可能会停止，然后再次滚动到第三张图片时（例如fullpagejs）。我检查了其他帖子，但是我不太了解该怎么做。请帮忙。

$(document).scroll(function(event) {
event.preventDefault();
var y = $(this).scrollTop();

if (y >= 100) {
  $('#section2').fadeIn('slow');

} else {
  $('#section2').fadeOut('slow');
};

if (y >= 200) {
  $('#section3').fadeIn('slow');
} else {
  $('#section3').fadeOut('slow');
};

if (y >= 300) {
  $('#section4').fadeIn('slow');
} else {
  $('#section4').fadeOut('slow');
};

});

body {
  box-sizing: border-box;
  background-color:red;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  height: 738px;
  width: 50%;
  margin-top: 0px;
  margin-bottom: 1000px;
}

.slider_sections {
  width:100%;
  height:100%;
  display:none;
  position:fixed;
  z-index:-1;
}

#section2{
  background-color: #777;
}

#section3{
  background-color: #eee;
}

#section4{
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider_sections" id="section1">
    <h1>1</h1>
  </div>
  <div class="slider_sections" id="section2">
    <h1>2</h1>
  </div>
  <div class="slider_sections" id="section3">
    <h1>3</h1>
  </div>
  <div class="slider_sections" id="section4">
    <h1>4</h1>
  </div>
</div>

Answer 1

因此，在您的问题中，我将所有内容都放入了代码段中，并调用了jQuery库，因为这是运行代码所缺少的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

最后，即使现在一切正常，也请关闭最后一个</div>标签。如下。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider_sections" id="section1">
    <h1>1</h1>
  </div>
  <div class="slider_sections" id="section2">
    <h1>2</h1>
  </div>
  <div class="slider_sections" id="section3">
    <h1>3</h1>
  </div>
  <div class="slider_sections" id="section4">
    <h1>4</h1>
  </div>
</div> <!-- <---- There -->