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

Question

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

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

这可能 - 以及如何？

由于

Answer 1

你可以使用jquery“scrollTop”来完成它：

$(window).scroll(function() {
    if ($(window).scrollTop() > sumValue) { 
        $('#header').css('background', 'yellow');
    }
})

“总和值”是指您希望用户在您更改背景之前所经过的滚动量。

Answer 2

请查看Fiddle

$(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' });
    }

  });

});