javascript - ページを下にスクロールするときに H1 の色を変更するにはどうすればよいですか?

Question

上部に幅 100% の大きな写真があり、写真の上にタイトルがあるページがあります。写真をスクロールすると、固定位置のタイトルの色が変わるようにしたいと思います。ここでjsfiddleで作業バージョンを作成できました：

http://jsfiddle.net/dtZDZ/647/

これがjavascriptです（私はJSが初めてです）

    var tStart = 100 // Start transition 100px from top
,
tEnd = 300 // End at 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 to [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(',') + ')');
  });
});

残念ながら、スクロールを開始すると、h1 にカーソルを合わせても色が変わりません。また、クロム内でこのコードを使用してページを開こうとすると、テキストは、指定した濃い灰色ではなく、白から黒に変わります。これらの問題のいずれかを修正する方法を知っている人はいますか?

ありがとうございました