javascript - 当元素经过特定位置时更改 CSS 属性

Question

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

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

这是可能的 - 以及如何？

谢谢

Answer 1

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

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

“sumValue”指的是您希望用户移动的滚动量，直到您更改背景。

Answer 2

请看 小提琴

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

  });

});