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

Question

I am so new to Jquery and Javascript. I know there are bunch of exact same post or question but non of it works or I'm just to blind to use it.

My aim is to fade in a div as we scroll down, as we scroll down at a certain point I want to fade out back the div and another div fade in. Of cause there is no problem to fade in but to fadeout back is a problem. There are 6 sequence of div that i want to apply. The first div works fine as I scroll down on 2100 i want to fade it out and the next div will fade in which work pretty well.

the sequence div id is #header1 and so on and I set the #header2 to #header6 display to none in CSS. Is there any way to make it fade in just on the range of the windows or something. thanks a lot

here is some of the script that i try but it doesn't work

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

the reason is this:

just picture the scroll even just fired , and you are past 3500 ,

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

all execute at the exact same time , is that intended? , you should have conditions checking if the scroll position is between 2 numbers

if your 2100 > scrollTop < 3500 then:

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

all fire at the exact same time , and if you're below 2100 then:

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

all execute at the same time

Answer 3

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

will not work. You haven't written the if statement correctly. You should be using code looking something like this:

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