JS change border colour on scroll

Question

JS noob here. Something simple, just want to change the colour of a left-border as I scroll the page. So far I have two colours working, but I need to add a third.

Here's my version - I've commented out my buggy code

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

Cheers!

Answer 1

Try to make something like this

 $(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

You can use if else condition with certain width and change the border color accordingly.

 $(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

If you would like to add more color then you can try this solution. You can add easily more object to the scrollColor array.

 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

One small plugin for visitors:

 $.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) { if( scroll<cl.s && !found ) { found = true; if( !cl.a ) { myWrapper.addClass(cl.c); cl.a = true; }; } else { myWrapper.removeClass(cl.c); cl.a = false; } }); }); }); }; $('.main-wrapper').classChange([ { "s": 200, "c": "border-red", "a": false }, { "s": 400, "c": "border-blue", "a": false }, { "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> 

Also on JSFiddle or this way .