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

＆＃13;

＆＃13;

$('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 {}

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<强>样本

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来检查要添加的滚动值。