javascript - 如何在 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

一些问题。

• 如果滚动主页则绑定(bind)到窗口
• 获取 offset().top 以获取元素在页面下方的距离
• .inner 是 .full-height 的子项，不是父项，所以使用 find()
• 您的内部 选择器不正确。对类使用 .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>