Question

我是Jquery和Javascript的新手。我知道有一堆完全相同的帖子或问题，但它不起作用或我只是盲目地使用它。

我的目标是在我们向下滚动时淡入div，因为我们向下滚动某个点我想淡出div并且另一个div淡入。原因是淡入淡出没有问题但是淡出回来是个问题。我想要应用6个div序列。第一个div工作得很好，因为我在2100年向下滚动我想淡出它，下一个div会淡化，哪个工作很好。

序列div id是＃header1，依此类推，我在CSS中将＃header2设置为＃header6 display to none。有没有办法让它在窗户或其他东西上褪色。非常感谢

这是我尝试的一些脚本，但它不起作用

$(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();
 } });

Answer 1

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

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

Answer 2

原因是：

只是拍摄了即使刚刚开始拍摄的卷轴，你已经过了3500，

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

所有都在同一时间执行，这是有意吗？，您应该有条件检查滚动位置是否在两个数字之间

如果您的2100＆gt; scrollTop＆lt; 3500然后：

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

所有人都在同一时间开火，如果你在2100以下，那么：

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

全部同时执行

Answer 3

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');
   }
});

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

3 个答案: