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

我正在网站上工作，在此网站内，有一个scroll图标，它具有fixed的位置并因此与用户一起滚动。由于网站的双色调设计，我希望此图标在从浅色背景变为深色背景时改变颜色。小示例：当元素滚动过去一行时，更改元素的CSS属性

正如您所看到的，scroll文本现在是白色，在黑色背景上。但是，当它滚动到白色的一面时，我希望scroll文本变黑。

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

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

然而，当用户到达的底部这只会激活.light元素。

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

编辑就像问的意见，这里有一个codepen： https://codepen.io/anon/pen/ZyYBKM

来源

2017-06-05 Wesley Peeters

你能提供一个CodePen或的jsfiddle与培训相关的代码，请。 –

@JamesDouglas新增了一个codepen :-) –

当前的codepen不会在灯光部分的底部变成黑色。 – JiFus

当然，这是可能的。为了达到这个效果，你将不得不设置一个偏移量。在这种情况下，偏移量将为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

来源

2017-06-05 10:10:59 JiFus

这可以在向下滚动时起作用，但不起作用。 –

当然不会，因为您只是将此代码添加到灯光部分。 – JiFus

请将该代码添加到.dark部分。 –

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

回答

相关问题