在某個位置滾動時更改背景顏色

Question

我正在研究這個，我正在做的是我在滾動某個位置上改變背景顏色。 現在它工作正常，直到紅色，但再次綠色沒有出現。 這裏是代碼

$(document).ready(function() { 
     var scroll_pos = 0; 
     $(document).scroll(function() { 
      scroll_pos = $(this).scrollTop(); 

      if (scroll_pos < 210) { 
       $("body").css('background-color', 'black'); 
      } 
      else if (scroll_pos > 210) { 
       $("body").css('background-color', 'red'); 
      } 
      else if (scroll_pos > 410) { 
       $("body").css('background-color', 'orange'); 

      } 

      else if (scroll_pos > 710) { 
       $("body").css('background-color', 'green'); 

      } 

     }); 
    }); 

這裏是小提琴 Fiddle Here

請告訴我，如果我做錯事，如果有別的。 謝謝。

Answer 1

試試這個

$(document).ready(function() { 
      var scroll_pos = 0; 
      $(document).scroll(function() { 
       scroll_pos = $(this).scrollTop(); 

       if (scroll_pos < 210) { 
        $("body").css('background-color', 'black'); 
       } 
       else if (scroll_pos > 210 && scroll_pos < 410) { 
        $("body").css('background-color', 'red'); 
       } 
       else if (scroll_pos > 410 && scroll_pos < 710) { 
        $("body").css('background-color', 'orange'); 

       } 

       else if (scroll_pos > 710) { 
        $("body").css('background-color', 'green'); 

       } 
       console.log(scroll_pos) 

      }); 
     }); 

DEMO

Answer 2

Working Fiddle

您需要添加附加條件到if報表限制background-color到scroll_pos。

  if (scroll_pos < 210) { 
       $("body").css('background-color', 'black'); 
      } 
      else if (scroll_pos > 210 && scroll_pos < 410) { 
       $("body").css('background-color', 'red'); 
      } 
      else if (scroll_pos > 410 && scroll_pos < 710) { 
       $("body").css('background-color', 'orange'); 
      } 
      else if (scroll_pos > 710) { 
       $("body").css('background-color', 'green'); 

      } 

Answer 3

我會解決它像這樣：

$(document).ready(function() { 
     var scroll_pos = 0; 
     var color = 'black'; 
     $(document).scroll(function() { 
      scroll_pos = $(this).scrollTop(); 

      if (scroll_pos < 210) { 
       color = 'black'; 
      } 
      if (scroll_pos > 210) { 
       color = 'red'; 
      } 
      if (scroll_pos > 410) { 
       color = 'orange'; 
      } 
      if (scroll_pos > 710) { 
       color = 'green'; 
      } 
      $("body").css('background-color', color); 

     }); 
    }); 

存儲在變量使用的顏色。隨着條件變大，更改變量。在最後應用該變量作爲背景顏色屬性。沒有必要比較大小，只是按比較的順序進行比較。

小提琴這裏：http://jsfiddle.net/x69xm/4/