jquery - 根据当前可见的页面部分更改固定元素的类 (jQuery)

标签 jquery html css scroll-position

各位开发者大家好!

我对网络进行了大量扫描,包括 StackOverflow,但似乎找不到任何记录我想要的东西,也找不到任何与我想要的东西有任何相似之处。

我正在构建一个带有固定导航栏的网站,但导航栏实际上没有背景颜色(透明)。在导航栏中有两个可见元素;

  • 客户的标志;我使用自定义字体创建了它,因此我实际上能够使用通过 JS 应用的 css 和类来控制所有格式。

  • 菜单切换按钮;这也是所有基于元素的,我可以完全控制通过 JS 应用的 css 和类。

页面结构为<section>基于,每个部分是“灰白色”或“黑色”。

例如<section class="dark">...</section>将具有黑色背景 (dur)。


问题

菜单按钮和客户端 Logo 也是黑色的,所以我需要一种方法来跟踪当前可见/滚动部分的类是什么(“深色”或“浅色”),然后通过 JS 将一个类应用于导航。

因此,如果当前部分的类别为“light”,则菜单按钮和 Logo 为黑色,如果当前部分的类别为“dark”,则菜单按钮和 Logo 变为白色。


我完全了解可用的插件,例如“scrollorama”,它们具有部分侦察功能,但我实际上只需要使用一小部分功能,因此编写自定义函数会更有效率。也乐于接受建议。

最佳答案

我在找和你一样的东西,我找到了这个:

slideshow with changing font color on each slide + callback font to set color on scroll

希望它能给你一些提示!

关于jquery - 根据当前可见的页面部分更改固定元素的类 (jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20228718/

相关文章:

javascript - 使用 javascript 将文本拆分为单个单词,每个单词占一行

html - 如何添加应该覆盖通用 css 的 google chrome 特定 css?

Javascript 一行 if else 简写困惑

javascript - jQuery 使用 height() 来改变 div 的高度

javascript - 切换多个表行

css - 对齐 span 标签内的文本

css - 高度页面-Div结构

css - 具有大边框的内联 block 按钮向下两个像素

jquery - 分区 :hover working only on last of type

jquery - 更改当前 URL 的 css