if else語句內有多個if else-模擬滾動

Question

這個問題已經被問過很多次了，但無法弄清楚為什么進展不順利。 我正在嘗試模擬滾動條以具有更大的靈活性，但需要具有許多條件。 當向上或向下滾動到fadeIn和fadeOut div時，我得到一個鼠標滾輪事件。 它可以與一個div一起使用，但不能與更多的一起使用。

我正在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> 

在每個鼠標滾輪事件中，它都會更改div。 您可以根據自己的div檢查要添加多少滾動值。