【发布时间】：2013-12-12 06:47:50
【问题描述】：
各位开发者您好！
我对网络进行了一次大扫描，包括 StackOverflow，但似乎找不到任何记录我想要的东西，也找不到任何与我想要的东西很相似的东西。
我正在构建一个带有固定导航栏的网站，但导航栏实际上并没有背景颜色（透明）。在导航栏中有两个可见的元素；
-
客户的标志；我使用自定义字体创建了它，因此我实际上能够使用通过 JS 应用的 css 和类来控制所有格式。
-
菜单切换按钮；这也是基于元素的，我可以完全控制通过 JS 应用的 css 和类。
页面结构基于<section>，每个部分都是“灰白色”或“黑色”。
例如 <section class="dark">...</section> 将有黑色背景 (dur)。
问题
菜单按钮和客户端徽标也是黑色的，所以我需要一种方法来跟踪当前可见/滚动部分的类是什么（“暗”或“亮”），然后通过 JS 将一个类应用于导航。
因此，如果当前部分具有“light”类，则菜单按钮和徽标为黑色，如果当前部分具有“dark”类，则菜单按钮和徽标变为白色。
我完全了解可用的插件，例如“scrollorama”，它们具有部分间谍功能，但我真的只需要利用一小部分功能，因此编写自定义函数会更有效率。也欢迎提出建议。
【问题讨论】：
-
我通常等到 windowload 事件触发，检查每个部分的顶部位置和高度，然后在滚动时根据滚动位置和前面提到的位置/高度决定要添加什么类。
-
如果你在两个部分之间，你如何处理它？例如，菜单栏的一半在亮区，一半在暗区？您可能需要重新考虑这一点，因为我认为这看起来有点破碎。
-
@KevinB 你有我可以看看的例子吗？
-
@kevinB 导航栏非常小，所以它真的只在乎导航栏在哪个部分，如果你在黑暗部分和明亮部分之间，导航仍然会在黑暗部分直到你滚动到它之外。
-
这是一个例子，请记住，虽然它实际上并没有做你需要它做的事情，它只是展示了我如何找到所有部分的位置，然后检测我是否在他们里面。 pastebin.com/WGckwwE7 它已被修改以适应它正在工作的页面，但它可能是一个不错的起点。
标签： jquery html css scroll-position