jquery - 如何让div一次淡出一个

Question

我在一个可滚动包装器中有三个 div。我想让每个 div 在滚动出“包装器”时淡出，一次一个。

现在，当我滚动时，所有三个 div 同时淡出。我花了很多时间试图解决这个问题，但仍然没有找到解决方案。

TEST FIDDLE HERE

$(document).ready(function() {
  $(window).scroll(function() {
    $(".title").css("opacity", 1 - $(window).scrollTop() / 300);
  })
});

body {
  margin: 0;
  height: 100%;
}

.wrapper {
  height: 1000px;
  position: relative;
}

.title {
  margin: 0 auto;
  width: 100%;
  background-color: #aaa;
  height: 300px;
  opacity: 1;
  text-align: center;
  font-family: 'helvetica';
  font-size: 80px;
  font-weight: 100;
  color: #fff;
  top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="title">Image 1</div>
  <br>
  <div class="title">Image 2</div>
  <br>
  <div class="title">Image 3</div>
</div>

Answer 1

你已经很接近了，但是你必须遍历元素并分别考虑它们在页面顶部的位置。

注意:通常做这种监听滚动事件的事情不是一个好习惯，因为它可能会触发超过必要的次数，请尝试阅读这里:https://www.sitepoint.com/throttle-scroll-events/

注意 2:出于性能原因，我将 .titles 缓存在 $titles 中。

$(document).ready(function() {
  var $titles = $(".title");
  $(window).scroll(function() {
    $titles.each(function() {
      $(this).css("opacity", 1 - ($(window).scrollTop() - $(this).position().top )/ 300);
    })
  })
});

body {
  margin: 0;
  height: 100%;
}

.wrapper {
  height: 1000px;
  position: relative;
}

.title {
  margin: 0 auto;
  width: 100%;
  background-color: #aaa;
  height: 300px;
  opacity: 1;
  text-align: center;
  font-family: 'helvetica';
  font-size: 80px;
  font-weight: 100;
  color: #fff;
  top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="title">Image 1</div>
  <br>
  <div class="title">Image 2</div>
  <br>
  <div class="title">Image 3</div>
</div>