window scroll in not working with if else if

  if (height > offSetValue) {
    $('.showOne').fadeOut();
    $('.showTwo').fadeIn('slow');
  } else if (height > offSetValue2) {
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeIn('slow');
  } else if (height > offSetValue3) {
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeOut();
    $('.showFour').fadeIn();
  }

The problem is the else if conditions. The else if is not executed because the first condition is ever true when the second and third is true.

You need to specify the range beetween heights are really true:

if ( (height > offSetValue) && (height < offSetValue2)) {
     //exec
} 
else if ( (height > offSetValue2) && (height < offSetValue3)) {
   //exec
}
else if (height > offSetValue3) {
  // exec
} 

This resolve the problems whit if/else if (Y)

Edit 1:

Try this for confirm:

var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + 500;
var offSetValue2 = scrolTop + 700; 
var offSetValue3 = scrolTop + 900;
var offSetValue4 = scrolTop + 1100;


$(window).scroll(function() {
  var height = $(window).scrollTop();

  if ( (height > offSetValue) && (height < offSetValue2)) {
    console.log(1)
    $('.showOne').fadeOut();
    $('.showTwo').fadeIn('slow');
    $('.showThree').fadeOut();
    $('.showFour').fadeOut();
  } else if ( (height > offSetValue2) && (height < offSetValue3)) { 
    console.log(2)
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeIn('slow');
    $('.showFour').fadeOut();
  } else if (height > offSetValue3) {
    console.log(3)
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeOut('slow');
  }
});

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top