javascript 当页面在 jquery 中向下滚动时显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23515721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show div when page scroll down in jquery
提问by user3190238
I have this HTML code
我有这个 HTML 代码
HTML
HTML
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
and this CSS code
和这个 CSS 代码
CSS
CSS
#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}
Script:
脚本：
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#d1").css("display","block");
}else {
$("#d1").css("display","none");
}
});
});
</script>
Question:When I scroll page down each div display one by one. When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.
问题：当我向下滚动页面时，每个 div 都会一一显示。当滚动条到达 "#d2" 时，应显示 div "#d1"，当滚动条到达 "#d3" 时，应显示 div "#d2".... 当滚动条到达页面末尾时 "#d5" "应该显示。
回答by qtgye
You may try this similar case:
你可以试试这个类似的案例：
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});
