0

我有一个页面，顶部有一张 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 中使用此代码打开页面时，文本只是从白色变为黑色，而不是我指定的深灰色。有谁知道如何解决这些问题中的任何一个？

谢谢

4

2 回答 2

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/

于 2013-08-01T00:44:13.273 回答
0

至于悬停不起作用，您设置的内联样式会覆盖 CSS 中的 :hover 状态。

快速解决：

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

此外，该链接在设计上在 jsFiddle 中不起作用，因为它在 iframe 中运行。如果出于某种原因您真的很想这样做，那么将 target="_parent" 添加到锚标记

于 2013-07-31T20:41:58.347 回答