javascript - 根据当前部分类更改滚动上的固定徽标颜色?
问题描述
我正在尝试根据您滚动的当前部分更改固定 SVG 徽标的颜色。例如,如果您在具有“介绍”或“项目”类的部分内滚动,我想使用 CSS 类更改徽标颜色。
因此,在进入该部分并在该部分的末尾从顶部和底部滚动以删除和添加上一个类。
基本上,我有一个包含所有部分的数组,其中包含一个 EventListener 滚动条,该滚动条应该在滚动条上切换徽标类,以及是否在一个部分内切换。
有人可以帮我吗?
我的代码:
(() => {
const logo = document.querySelector('.logo');
const sections = document.querySelectorAll('section');
if(!sections.length) {
return;
}
const onPageScroll = () => {
sections.forEach(section => {
console.log(section);
});
}
window.addEventListener('scroll', onPageScroll);
})();
解决方案
我相信其中一支笔应该可以帮助您。你想要做的是一个滚动间谍。
从第二支笔:
const spyScrolling = ( ) => {
const sections = document.querySelectorAll( '.hero-bg' );
window.onscroll = ( ) => {
const scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
for ( let s in sections )
if ( sections.hasOwnProperty( s ) && sections[ s ].offsetTop <= scrollPos ) {
const id = sections[ s ].id;
document.querySelector( '.active' ).classList.remove( 'active' );
document.querySelector( `a[href*=${ id }]` ).parentNode.classList.add( 'active' );
}
}
}
还有很多其他的例子,你只需要知道正确的关键字。
推荐阅读
- html - 我如何在侧边栏中制作带有两列的图像
- rest - 通过 Rest API Magento 2 获取具有 id 的特定产品
- java - 如何在@Scheduled 注释中指定应该在太平洋标准时间上午 7 点到下午 6 点之间每小时触发一次的 PST 时区?
- ios - 本地化请求权限基于应用程序语言而不是设备语言
- python - 如何使用 matplotlib 在 cartopy 极地立体图中获得平滑的网格线?
- c# - 使用 Razor 渲染多文件 Input
- javascript - div的抓取id,通过模板字面量设置为数字
- c - Valgrind 报告不同数量的分配和释放,但所有块都被释放
- typescript - Typescript:如何在两个相似的界面之间进行过滤
- java - 我为 Java 2d 数组分配的内存是错误的还是在运行时发生了什么?