javascript - How can I change H1 color as you scroll down the page? -

i have page large 100% width photo @ top , title on top of photo. have fixed position title change color scroll past photo. have been able create working version in jsfiddle here:

http://jsfiddle.net/dtzdz/647/

here javascript (i new js)

    var tstart = 100 // start transition 100px top , tend = 300 // end @ 300px , cstart = [255, 255, 255] // white , cend = [156, 156, 156] // black , cdiff = [cend[0] - cstart[0], cend[1] - cstart[1], cend[1] - cstart[0]];  $(document).ready(function () { $(document).scroll(function () {     var p = ($(this).scrolltop() - tstart) / (tend - tstart); // % of transition     p = math.min(1, math.max(0, p)); // clamp [0, 1]     var cbg = [math.round(cstart[0] + cdiff[0] * p), math.round(cstart[1] + cdiff[1] * p), math.round(cstart[2] + cdiff[2] * p)];     $("h1 a").css('color', 'rgb(' + cbg.join(',') + ')');   }); }); 

unfortunately, once start scrolling h1 no longer changes color when hover on it. when try open page code inside chrome text goes white black instead of dark grey specified. know how fix either of these issues?

thank you

as far hover not working, inline style setting overrides :hover state in css.

quick fix:

h1 a:hover {     color: rgb(200, 200, 200)!important; } 

also, link doesn't work in jsfiddle design because running in iframe. if tempted reason though, add target="_parent" anchor tag