Javascript 当元素通过特定位置时更改CSS属性

我的页面包含一个标题，它位于黑色图像的顶部。图像与浏览器中的视口大小完全相同

我的目标是，当我向下滚动页面，标题完全通过图像时，标题的背景颜色会发生变化

这有可能吗？怎么可能

---

谢谢

您可以使用jquery的“scrollTop”完成这项工作：

“sumValue”指在您更改背景之前，您希望用户移动的滚动量。

请查看

$（函数（）{
var image=$（'.image'），
winHgt=$（window.innerHeight（）；
css（{height:winHgt}）；
$（窗口）。滚动（函数（）{
变量头=$（“#头”），
winHgt=$（window.innerHeight（）；
if（$（window.scrollTop（）>winHgt）{
$（'#header'）.css（{background:'#333'}）；
}
如果（$（window.scrollTop（）

请显示您的html或创建一个jsfiddle.net（这是可能的！），类似于我看到有人使用CSS

后台附件来实现此目的。你能发一把小提琴吗？这个代码不起作用。我得到的错误是“UncaughtReferenceError:sumValue未定义”，而不是“sumValue”。在更改背景之前，您应该输入希望用户移动的滚动量。
$(window).scroll(function() {
    if ($(window).scrollTop() > sumValue) { 
        $('#header').css('background', 'yellow');
    }
})

$(function() {

  var image  = $('.image'),
      winHgt = $(window).innerHeight();

  image.css({ height: winHgt });


  $(window).scroll(function() {

    var header  = $('#header'),
        winHgt  = $(window).innerHeight();

    if ($(window).scrollTop() > winHgt) { 
      $('#header').css({ background: '#333' });
    }
    else if ($(window).scrollTop() < winHgt) { 
      $('#header').css({ background: '#888' });
    }

  });

});