当元素滚过一行时更改元素的CSS属性

Question

我正在一个网站上工作，在这个网站中，有一个scroll图标，其位置为fixed，因此会向用户滚动。由于网站的双色调设计，我希望这个图标在从浅色背景变为黑暗背景时改变颜色。小例子：

如您所见，scroll文字现在是白色的，在深色背景上。但是，当它滚动到白色边时，我希望scroll文字变暗。

我尝试做的是使用waypoints库使每个灯光部分成为一个航点，然后改变这样的颜色：

$('.light').waypoint(function(direction) {
    $(".scroll").find('span').css('color', '#000');
});

但是，这只会在用户到达.light元素的底部时激活。

有没有办法以更流畅的方式做到这一点？感谢。

编辑在评论中提到，这是一个代码： https://codepen.io/anon/pen/ZyYBKM

Answer 1

当然这是可能的。 要达到此效果，您必须设置偏移量。 在这种情况下，偏移量将是100％。

更新的代码：

$('.light').waypoint({
  handler: function(direction) {
    if(direction == "down") {
     $(".scroll").find('div').css('background', '#252A2F');
     $(".scroll").find('span').css('color', '#252A2F');
    } else {
      // Scrolling up, reverse the process
     $(".scroll").find('div').css('background', '#ffffff');
     $(".scroll").find('span').css('color', '#ffffff');
    }
  },
  offset: '100%'
});
$('.dark').waypoint({
  handler: function(direction) {
    if(direction == "down") {
     $(".scroll").find('div').css('background', '#ffffff');
     $(".scroll").find('span').css('color', '#ffffff');
    } else {
      // Scrolling up, reverse the process
     $(".scroll").find('div').css('background', '#252A2F');
     $(".scroll").find('span').css('color', '#252A2F');
    }
  },
  offset: '100%'
});

链接到a codepen