jquery - 我们滚动时如何淡入淡出元素（div）

我对Jquery和Javascript是如此的陌生。我知道有一堆完全相同的帖子或问题，但没有它的作品，或者我只是盲目使用它。jquery - 我们滚动时如何淡入淡出元素（div）

我的目标是当我们向下滚动时淡入div，当我们向下滚动某个点时，我想淡出div而另一个div淡入。因为没有淡入的问题，但是退色是一个问题。有6个div序列，我想申请。第一个div工作正常，因为我在2100年向下滚动，我想淡出它，下一个div会淡入淡出，哪些工作非常好。

序列的div id为＃头1等和我设置了＃向HEADER2＃header6显示器无法比拟的CSS。有没有什么办法让它在窗户或其他东西的范围内褪色。非常感谢

这里是一些我尝试了剧本，但它不工作

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > 2100) { 
    $('#header1').fadeOut(); 
} 
else { 
    $('#header1').fadeIn(); 
} }); 

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > 2100) { 
    $('#header2').fadeIn(); 
} 
else if ($(window).scrollTop() > 3500) { 
    $('#header2').fadeOut(); 
} 
else { 
    $('#header2').fadeOut(); 
} }); 

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > 3500) { 
    $('#header3').fadeIn(); 
} 
else { 
    $('#header3').fadeOut(); 
} });

来源

2015-05-04 Saifdean

使用CSS3不透明度转换并计算alpha的比率。 2100 = 100％，3500 = 0％ – Eric

您注意到了，如何在不使用jQuery的情况下使用CSS3转换。我谷歌它和大部分的CSS不透明转换通过将鼠标悬停在它上面发生，我如何作为用户在页面的某个位置的过渡。 – Saifdean

看看http://www.w3schools.com/css/css3_transitions.asp并发布一些代码，从这里开始。它基本上像改变其他任何东西一样改变CSS。如果您不介意硬件加速，也可以使用标准不透明属性。 – Eric

我认为你可以做这样的事情纠正我，如果我有这样错误的你不需要计算你需要.scrollTop（）的位置。

if ($(window).scrollTop() > $("#header").scrollTop())

来源

2015-05-04 03:57:29 DevNiels

#header（div）的位置在CSS中是固定的，忘记提及。所有#header（div）都是按顺序排列的，我将显示设置为none。所以当我滚动所有我想要的是淡出逐渐淡出的div。 – Saifdean

原因是这样的：

只是想象，甚至刚刚解雇滚动，和你过去的3500，

$('#header1').fadeOut(); 
$('#header2').fadeIn(); 
$('#header2').fadeOut(); 
$('#header3').fadeIn();

所有执行在精确的同一时间，请问这是故意的吗？，你应该如果你的2100> scrollTop的< 3500则具备的条件检查，如果滚动位置2号

之间

：

$('#header1').fadeOut(); 
$('#header2').fadeIn(); 
    $('#header2').fadeOut(); 
    $('#header3').fadeOut();

所有火在完全相同的时间，如果你低于2100则：

$('#header1').fadeIn(); 
    $('#header2').fadeOut(); 
    $('#header3').fadeOut();

均实行在同一时间

来源

2015-05-04 03:57:53

我所做的是'if（$（window））。scrollTop（）> 2100 <3500）{（'＃header2'）。fadeIn（）;并且它不起作用 – Saifdean

if ($(window).scrollTop() > 2100 <3500) { $('#header2').fadeIn(); }

不会工作。您没有正确书写if语句。你应该使用类似这样的代码：

$(document).ready(function(){ 
if (scrollTop > (2100) && scrollTop < (3500)){ 
    $('#header1').fadeIn('slow'); 
    $('#header2').fadeout('slow'); 
    $('#header3').fadeOut('slow'); 
}else{ 
    $('#header1').fadeOut('slow'); 
    $('#header2').fadeIn('slow'); 
    $('#header3').fadeIn('slow'); 
    } 
});

来源

2015-09-25 12:09:21

jquery - 我们滚动时如何淡入淡出元素（div）

回答

相关问题