gpt4 book ai didi

javascript - 如何在 JQuery 中到达容器 scrollTop 时淡入元素?

转载 作者:行者123 更新时间:2023-11-30 14:10:03 25 4
gpt4 key购买 nike

当用户向下滚动页面时,我正在尝试 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()

当滚动条到达元素顶部时,如何显示我的内部元素?

最佳答案

一些问题。

  • 如果滚动主页则绑定(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>

关于javascript - 如何在 JQuery 中到达容器 scrollTop 时淡入元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54636863/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com