JS在滾動上更改邊框顏色

Question

JS noob here。簡單一點，只需要在頁面滾動時更改左邊框的顏色。到目前爲止，我有兩種顏色的工作，但我需要添加三分之一。

這裏是我的版本 - 我註釋掉我的bug的代碼

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>

Answer 2

可以使用帶有一定的寬度，如果其他條件並相應地改變邊框的顏色。

$(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll < 200) { 
 
    $(".main-wrapper").css("border-color", "red"); 
 
    } else if (scroll > 200 && scroll < 1000) { 
 
    $(".main-wrapper").css("border-color", "blue"); 
 
    } else { 
 
    $(".main-wrapper").css("border-color", "green"); 
 
    } 
 

 

 

 

 
});

/* body { 
 
    background-color: red; 
 
    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; 
 
    height: 3000px; 
 
} 
 

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

Answer 3

如果你想添加更多的色彩，那麼你可以嘗試這種解決方案。您可以輕鬆地將更多對象添加到scrollColor陣列。

var scrollColor = [ 
 
    { 
 
    maxScroll: 600, 
 
    class: 'green' 
 
    }, 
 
    { 
 
    maxScroll: 400, 
 
    class: 'blue' 
 
    }, 
 
    { 
 
    maxScroll: 200, 
 
    class: 'red' 
 
    } 
 
]; 
 
    
 
$(window).scroll(function() {  
 
    var scroll = $(window).scrollTop(); 
 
    var mainClass; 
 
    
 
    for(var i = 0; i<scrollColor.length;i++) { 
 
    $(".main-wrapper").removeClass(scrollColor[i].class); 
 
    if(scrollColor[i].maxScroll > scroll) { 
 
     mainClass = scrollColor[i].class; 
 
    } 
 
    } 
 
    $(".main-wrapper").addClass(mainClass); 
 
});

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

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

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

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

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

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

Answer 4

一個小插件爲用戶：

$.fn.classChange = function(myClasses) { 
 
    var myWin = $(window); 
 
    return this.each(function() { 
 
     var myWrapper = $(this); 
 
     myWin.on('scroll', function(e) { 
 
      var scroll = myWin.scrollTop(); 
 
      var found = false; 
 
      $.each(myClasses, function(i, cl) { 
 
      \t if(scroll<cl.s && !found) { 
 
        found = true; 
 
        if(!cl.a) { 
 
         myWrapper.addClass(cl.c); 
 
         cl.a = true; \t 
 
        }; 
 
       } else { 
 
        myWrapper.removeClass(cl.c); 
 
        cl.a = false; 
 
       } 
 
      }); 
 
     }); 
 
    }); 
 
}; 
 

 
$('.main-wrapper').classChange([ 
 
    { 
 
    \t "s": 200, 
 
     "c": "border-red", 
 
     "a": false 
 
    }, 
 
    { 
 
    \t "s": 400, 
 
     "c": "border-blue", 
 
     "a": false 
 
    }, 
 
    { 
 
    \t "s": 100000, 
 
     "c": "border-green", 
 
     "a": false 
 
    } 
 
]);

body { 
 
    margin: 0; 
 
} 
 

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

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

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

 
.border-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"> 
 
    Scroll down 
 
</div>

同樣在JSFiddle或this way。