Question

我的页面顶部有一张100％宽的照片，照片顶部有一个标题。当您滚动浏览照片时，我希望固定位置标题更改颜色。我已经能够在jsfiddle中创建一个工作版本：

这是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(',') + ')');
  });
});

不幸的是，一旦我开始滚动，当我将鼠标悬停在它上面时，它不再会改变颜色。此外，当我尝试在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/

Answer 2

就悬停不起作用而言，您设置的内联样式会覆盖CSS中的：悬停状态。

快速修复：

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

此外，该链接在jsFiddle中不起作用，因为它在iframe中运行。如果您因某种原因真的想要这样做，那么将target =“_ parent”添加到锚标记

当您向下滚动页面时，如何更改H1颜色？

2 个答案: