在某个位置滚动时更改背景颜色

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/