当元素到达JQuery中的scrollTop容器时，如何淡入元素？

Question

当用户向下滚动页面时，我正在尝试fadeIn()的所有元素。当文档的scrollTop()到达元素的scrollTop()时，该元素应显示。

$(document).ready(function() {
  $(this).scroll(function() {
    let pos = $(this).scrollTop();
    $('.full-height').each(function() {
      if (pos > $(this).scrollTop()) {
        $(this).closest('inner').fadeIn();
      }
    });
  });
});

.full-height {
  height: 100vh;
}

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

.position-ref {
  position: relative;
}

.inner {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-center position-ref full-height">
  <div class='inner'>
    Foo
  </div>
</div>
<div class="flex-center position-ref full-height">
  <div class='inner'>
    Bar
  </div>
</div>

但是，我当前的代码根本不起作用。由于我有多个容器，因此我尝试在这些多个容器中使用each()方法来单独检查其scrollTop()。

当滚动条到达元素顶部时，如何显示内部元素？

Answer 1

一些问题。

• 如果要滚动主页，请绑定到窗口
• 获取offset().top，以获取元素在页面中的位置
• .inner是.full-height的子代，而不是父代，因此请使用find()
• 您的inner选择器不正确。将.inner用于课程

$(document).ready(function() {
  $(window).scroll(function() {
    let pos = $(this).scrollTop();
    $('.full-height').each(function() {
      if (pos > $(this).offset().top) {
        $(this).find('.inner').fadeIn();
      }
    });
  });
});

.full-height {
  height: 100vh;
}

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

.position-ref {
  position: relative;
}

.inner {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-center position-ref full-height">
  <div class='inner'>
    Foo
  </div>
</div>
<div class="flex-center position-ref full-height">
  <div class='inner'>
    Bar
  </div>
</div>