我有几个div,本质上只是彩色矩形来帮助可视化。 当我向下滚动页面时,每个矩形应该fadeIn
或fadeOut
,具体取决于滚动条位置。 不幸的是,它吓坏了,褪色更多地像痉挛性闪光灯一样脱落。 我认为最好通过滚动每个元素的距离来确定不透明度级别,但我什至不确定从哪里开始这种愚蠢。
似乎这家伙也有类似的问题,但答案不起作用。
小提琴
jQuery
$(document).ready(function(){
var $element_array = $("#content").find("div");
$(window).scroll(function(){
$element_array.each (function(){
if (($(this).position().top + $(this).height()) < $(window).scrollTop())
$(this).fadeIn();
if (($(this).position().top + $(this).height()) > $(window).scrollTop())
$(this).fadeOut();
});
});
});
.HTML
<div id="content">
<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>
</div>
.CSS
html,body{height:100%;margin:0;}
#content{
background:#333333;
height:2000px;
z-index:1;
}
#bg1{
background:blue;
height:400px;
width:100%;
z-index:2;
position:fixed;
top:100px;
display: none;
}
#bg2{
background:green;
height:400px;
width:100%;
z-index:3;
position:fixed;
top:200px;
display: none;
}
#bg3{
background:red;
height:400px;
width:100%;
z-index:4;
position:fixed;
top:300px;
display: none;
}
你在这里遇到了一些问题
一个问题是$(this).position().top
为每个div返回0(由于它们的固定性质)。 您需要解析实际的 css 值。
二是功能的性质fadeIn()
和fadeOut()
。 如果您调用淡出的项目fadeOut()
,则在页面上粗暴滚动时,它将滞后。 但我在下面没有谈到这个问题。
我还在第一个if
之后放置了else
,因为代码路径(应该)是互斥的。
$(document).ready(function(){
var $element_array = $("#content").find("div");
$(window).scroll(function(){
$element_array.each (function(){
if ((parseInt($(this).css('top')) + $(this).height()) < $(window).scrollTop())
$(this).fadeIn();
else if ((parseInt($(this).css('top')) + $(this).height()) > $(window).scrollTop())
$(this).fadeOut();
});
});
});
<</div>
div class="one_answers"> 只需从淡出条件中删除 + height() 的东西,因为它在那里毫无意义
$(document).ready(function(){
var remember = 0;
var $element_array = $("#content").find("div");
$(window).scroll(function(){
$element_array.each (function(){
if (($(this).position().top+ $(this).height()) < $(window).scrollTop()){
$(this).fadeIn();}
if (($(this).position().top ) > $(window).scrollTop())
$(this).fadeOut();
});
});
});
http://jsfiddle.net/ruXeq/5/
它会像香草冰一样工作
单击并向下滚动页面时都会执行$(window).scroll()
处理程序,因此您将大量fadeIn()
和fadeOut()
调用推送到jQuery的动画队列中。 解决方案是在 if
语句中有一些东西来检查淡入淡出是否已经发生,如果是这样,则阻止向队列添加另一个动画,因此大致如下所示:
$(document).ready(function(){
var $element_array = $("#content").find("div");
var fades = 0;
$(window).scroll(function(){
$element_array.each (function(){
if (($(this).position().top + $(this).height()) < $(window).scrollTop() && (fades == 0))
$(this).fadeIn(function(){fades = 1;});
if (($(this).position().top + $(this).height()) > $(window).scrollTop() && (fades > 0))
$(this).fadeOut(function(){ fades = 0; });
});
});
});
http://jsfiddle.net/ruXeq/4/