Question

I have a sidebar and the various sections on a page. The sidebar floats left and the sections float right. I would like the sidebar color/background to change when it passes each section, so when it is on the first section it is red, second section blue and third section green. I have attached an example with the HTML/CSS. If someone could help me fill in the jQuery, that would be awesome.

http://jsfiddle.net/fkYZp/

Answer 1

http://jsfiddle.net/loktar/fkYZp/9/

Could definitely be prettied up to use a class etc. But here is the basic concept.

     var lifeStylePos = $('#lifestyle-sidebar').offset().top - y,
         onePos = $("#one").offset().top - y,
         twoPos = $("#two").offset().top - y,
         threePos = $("#three").offset().top - y;

     if(lifeStylePos  > threePos){
         $('#lifestyle-sidebar').css({'background' : 'green'});
     }else if(lifeStylePos > twoPos){
          $('#lifestyle-sidebar').css({'background' : 'blue'});
     }else if(lifeStylePos  > onePos){
          $('#lifestyle-sidebar').css({'background' : 'red'});
     }