Multiple if else inside if else statements - Simulate a scroll

Question

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

Answer 1

 $('body').bind('mousewheel', function(e) { if ($('.ecampus').css('display') == 'block') { if (e.originalEvent.wheelDelta / 120 > 0) { // TOP PAGE } else { $('.ecampus').fadeOut(); $('.pegasebuzz').fadeIn(); $('.notrecoin').fadeOut(); } } else if ($('.pegasebuzz').css('display') == 'block') { if (e.originalEvent.wheelDelta / 120 > 0) { $('.pegasebuzz').fadeOut(); $('.ecampus').fadeIn(); } else { $('.notrecoin').fadeOut(); $('.pegasebuzz').fadeOut(); $('.notrecoin').fadeIn(); } } else if ($('.notrecoin').css('display') == 'block') { if (e.originalEvent.wheelDelta / 120 > 0) { $('.ecampus').fadeOut(); $('.notrecoin').fadeOut(); $('.pegasebuzz').fadeIn(); } else {} } else {} }); 

 body { margin: 0; } .ecampus { width: 100%; height: 100%; background: red; display: block; position: absolute; } .pegasebuzz { width: 100%; height: 100%; background: blue; display: none; position: absolute; } .notrecoin { width: 100%; height: 100%; background: yellow; display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="ecampus"> E-CAMPUS </div> <div class="pegasebuzz"> PEGASEBUZZ </div> <div class="notrecoin"> NOTRE COIN </div> 

Answer 2

DEMO

 var scroll=0; $('body').bind('mousewheel', function(e) { if(scroll<10) scroll++; else{ scroll=0; if ($('.ecampus').css('display') == 'block') { if (e.originalEvent.wheelDelta < 0 ) { $('.ecampus').fadeOut(); $('.pegasebuzz').fadeIn(); } else { // TOP PAGE } return; } if ($('.pegasebuzz').css('display') == 'block') { if (e.originalEvent.wheelDelta < 0) { $('.pegasebuzz').fadeOut(); $('.notrecoin').fadeIn(); } else { $('.pegasebuzz').fadeOut(); $('.ecampus').fadeIn(); } return; } if ($('.notrecoin').css('display') == 'block') { if (e.originalEvent.wheelDelta < 0) { // BOTTOM PAGE } else { $('.notrecoin').fadeOut(); $('.pegasebuzz').fadeIn(); } return; } } }); 

 body { margin: 0; } .ecampus { width: 100%; height: 100%; background: red; display: block; position: absolute; } .pegasebuzz { width: 100%; height: 100%; background: blue; display: none; position: absolute; } .notrecoin { width: 100%; height: 100%; background: yellow; display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ecampus"> E-CAMPUS </div> <div class="pegasebuzz"> PEGASEBUZZ </div> <div class="notrecoin"> NOTRE COIN </div> 

On every mousewheel event it changes the div. you can check how much scroll value you want to add according to your div.