Multiple if else inside if else statements - Simulate a scroll

The question has been asked a lot of times but can't figure why isn't going well. I'm trying to simulate a scroll to have more flexibilities but need to had many conditions. I get a mousewheel event when going up or down to fadeIn and fadeOut div. It is working with one div but can't make it with more.

I'm making a demo on JSFiddle

$('body').bind('mousewheel', function(e) {

  if ($('.ecampus').css('opacity') == '1') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
            // TOP PAGE
    } else {
      $('.pegasebuzz').fadeOut();
      $('.notrecoin').fadeIn();
    }
  }

  else if ($('.pegasebuzz').css('opacity') == '1') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.pegasebuzz').fadeOut();
      $('.ecampus').fadeIn();
    } else {
      $('.pegasebuzz').fadeOut();
      $('.notrecoin').fadeIn();
    }
  }

  else ($('.notrecoin').css('opacity') == '1') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.notrecoin').fadeOut();
      $('.pegasebuzz').fadeIn();
    } else {
      // BOTTOM PAGE
    }
  }
});