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

Question

I'm using scrollpsy from bootstrap.

I made an example of what I'm trying to do:

http://jsfiddle.net/te3V4/15/

All is good, he passing one active class to li at each section id, but I want change the background at header at 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 is the 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”);
  });
});

Answer 1

I'm not familiar with scrollspy but I've updated your fiddle http://jsfiddle.net/te3V4/18/

Basically on each tag I've added a "data-background" property which a value of the color you want. I reset all the colors on when it runs, and the assign the correct color using the 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')});
 });