javascript - How to change background-color in header with scrollpsy on each ID -

i'm using scrollpsy bootstrap.

i made example of i'm trying do:

http://jsfiddle.net/te3v4/15/

all good, passing 1 active class li @ each section id, want change background @ header @ each section

for example:

if #studio background-color: #0915ff;
if #green background-color: 085606;

$(function() {   var $spy = $('.nav');   $spy.bind("activate", function(e) {     //e.target current <li> element     var header = $(e.target).find("a").attr("href");         alert (header);         $studio = $('#studio')         $duplex = $('#duplex')         $tower = $('#tower')         if( $(header) == "#studio" ) window.alert( “alert actived”);   }); }); 

i'm not familiar scrollspy i've updated fiddle http://jsfiddle.net/te3v4/18/

basically on each tag i've added "data-background" property value of color want. reset colors on when runs, , assign correct color using following code.

   var $spy = $('.nav');         var first = $('a', '#navbar')[0];         $(first).css({'background-color':$(first).data('background')});   $spy.bind("activate", function(e) {    $('a', '#navbar').css({'background-color':'inherit'}); var header = $(e.target).find("a");//.attr("hr");   $(header).css({'background-color': header.data('background')});  });