根据页面位置更改文本颜色

Changing text color based on page position

本文关键字：文本颜色位置更新时间：2023-09-26

在我的网站上，我有一个粘性导航栏，它总是位于我的网站顶部，所以即使向下滚动，它仍然可见。

它也是透明的，只包含一些黑色文本。

问题是，在我的页面上，有几个不同背景颜色的div。因此，当我向下滚动页面时，导航中的文本看起来很好，因为我用较浅的背景覆盖了div，但在较深的背景上很难阅读。

我想我有两个选择：

这两种都有可能吗？或者还有其他我不知道的选择？

我刚刚读到Midnight.js，这是一个jQuery插件，允许您使用滚动元素上的数据属性来定义导航的外观。也许值得一看。

查看jQuery Waypoints。它非常适合你的问题。您可以指定精确的路点，这样当一个不同颜色的div到达菜单栏时，就会触发一个事件。在这种情况下，您可以更改菜单栏的颜色。然后你会在这个div的底部有另一个航路点，这样你就可以重置颜色。

http://imakewebthings.com/jquery-waypoints/