gpt4 book ai didi

javascript - 在 jquery 中向下滚动页面时显示 div

转载 作者:太空宇宙 更新时间:2023-11-04 03:50:10 25 4
gpt4 key购买 nike

我有这个 HTML 代码

HTML

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>

和这个 CSS 代码

CSS

#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}

脚本:

<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#d1").css("display","block");
}else {
$("#d1").css("display","none");
}
});
});
</script>

问题:当我向下滚动页面时,每个 div 一个一个地显示。当滚动条到达“#d2”时,应显示 div“#d1”,当滚动条到达“#d3”时,应显示 div“#d2”....当滚动条到达页面末尾时“#d5” "应该显示。

最佳答案

你可以试试这个类似的案例:

http://jsfiddle.net/j7r27/

$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});

关于javascript - 在 jquery 中向下滚动页面时显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23515721/

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