窗口滾動不工作 if else if

Question

我正在使用scroll功能，但我的else if塊中的代碼似乎沒有執行。

一旦用戶滾動超過某個點，我試圖隱藏一個 div 並顯示另一個。

這是我的代碼 - 我做錯了什么？

 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 1

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

問題是 else if 條件。 else if 不會執行，因為當第二個和第三個條件為真時，第一個條件永遠為真。

您需要指定高度之間的范圍是真的：

if ( (height > offSetValue) && (height < offSetValue2)) {
     //exec
} 
else if ( (height > offSetValue2) && (height < offSetValue3)) {
   //exec
}
else if (height > offSetValue3) {
  // exec
} 

這解決了 if/else if (Y) 的問題

編輯1：

試試這個以確認：

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