window scroll in not working with if else if

I’m using the scroll function, but the code in my else if blocks do not appear to be executing.

I’m trying to hide one div and show another, once the user scrolls past a certain point.

Here’s my code – what am I doing wrong?

var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + (showOneHeight - 50);
var offSetValue2 = scrolTop + (showTwoHeight2 - 50);
var offSetValue3 = scrolTop + (showThreeHeight3 - 50);
var offSetValue4 = scrolTop + (showFourHeight4 - 50);
// alert(offSetValue3)
$(window).scroll(function() {
  var height = $(window).scrollTop();
  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();
  }
});

body {
  margin: 0px;
}

.contentArea {
  display: flex;
  height: 100vh;
}

.boxes {
  width: 50%;
}

.pinned {
  background: rgb(72, 91, 35);
}

h1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 20px;
  text-transform: capitalize;
  font-family: system-ui;
  color: #fff;
}

.content {
  position: relative;
}

.box {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.showOne {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div style="height: 500px; background: violet;"></div>
<div style="height: 500px; background:yellowgreen;"></div>
<div class="contentArea">
  <div class="pinned boxes">
    <h1>i am pinned side</h1>
  </div>
  <div class="content boxes">
    <div class="box showOne">
      <strong>paragraph one</strong>
      <p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
    </div>
    <div class="box showTwo">
      <strong>paragraph two</strong>
      <p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
    </div>
    <div class="box showThree">
      <strong>paragraph three</strong>
      <p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
    </div>
    <div class="box showFour">
      <strong>paragraph three</strong>
      <p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
    </div>
  </div>
</div>
<div class="test" style="height: 500px; background: rgb(39, 96, 106);"></div>
<div style="height: 500px; background: rgb(46, 35, 46);"></div>

Answer

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