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 不再改变颜色。此外，当我尝试在 chrome 中使用此代码打开页面时，文本只是从白色变为黑色，而不是我指定的深灰色。有谁知道如何解决这些问题？

谢谢

Answer 1

我不会显式设置颜色，而是使用类切换:

var title = $('h1:first'),
  titleText = title.find('a'),
  titleTextHeight = titleText.height(),
  meow = $('#meowmeow'),
  meowBottom = meow.offset().top + meow.outerHeight();

$(document).ready(function () {
    $(document).scroll(function () {
        if ($(document).scrollTop() + titleTextHeight > meowBottom) {
          titleText.addClass('bare');
        } else {
          titleText.removeClass('bare');
        }
    });
});

那么这只是选择器的问题:

h1 a {
    position:fixed;
    color: white;
    text-decoration:none;
    padding: 5%;
    font-size: 2em;
}
h1 a.bare {
    color: rgb(156, 156, 156);
}
h1 a:hover, h1 a.bare:hover {
    color: rgb(200, 200, 200)
}

http://jsfiddle.net/9PJ9g/1/