javascript - JS在滚动条上改变边框颜色

Question

这里是 JS 菜鸟。一些简单的事情，只是想在滚动页面时更改左边框的颜色。到目前为止，我有两种颜色可以使用，但我需要添加第三种。

这是我的版本——我已经注释掉了错误代码

http://codepen.io/anon/pen/dWOwPz

$(window).scroll(function() {    
var scroll = $(window).scrollTop();

    if (scroll >= 200) {
      $(".main-wrapper").addClass("blue");
    } 

    //if(scroll>=400) {
    //  $(".main-wrapper").addClass("green");
    //}


   else {
     $(".main-wrapper").removeClass("blue");
     //$(".main-wrapper").removeClass("green");
    }
});

干杯!

Answer 1

试着做这样的东西

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 200 && scroll < 400) {
        $(".main-wrapper").removeClass("green");
        $(".main-wrapper").addClass("blue");
    } 
    
    else if(scroll>=400) {
      $(".main-wrapper").removeClass("blue");
      $(".main-wrapper").addClass("green");
    }
  
    else {
       $(".main-wrapper").removeClass("blue", "green");
    }
});

body {
  min-height:1200px;
  transition:background-color 0.75s ease;
}

.main-wrapper{
   border-left: 9px solid red; 
   /* background-color: red; */
   transition:border-left-color 0.9s ease;
   min-height: 1020px; 
}

.blue {
  border-left-color: blue;
}

.green {
  border-left-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
  
</div>