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

时间:2014-09-26 18:51:50

标签: javascript jquery html css

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

它也是透明的,只包含一些黑色文字。

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

我认为我有两个选择:

  1. 根据我是否使用“dark”类重叠div来更改导航文本颜色
  2. 根据其下方div的背景颜色更改导航文本颜色。
  3. 这些都可能吗?或者还有其他我不知道的选择吗?

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

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