jQuery-如何在滚动时淡入和淡出元素（div）

Question

我对Jquery和Javascript很陌生。 我知道有一堆完全相同的帖子或问题，但都不起作用，或者我只是盲目使用。

我的目标是在向下滚动时在div中淡入，在某个点向下滚动时，我要向后淡出div，而另一个div逐渐淡入。当然，淡入是没有问题的，但是淡出是问题。 我要应用6个div序列。 当我向下滚动2100时，第一个div效果很好，我想将其淡出，而下一个div则将淡入效果，效果很好。

序列div ID是＃header1，依此类推，我在CSS中将＃header2设置为＃header6 display。 有什么方法可以使其仅在窗户范围内褪色。 非常感谢

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

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

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

如果您的2100> scrollTop <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');
   }
});