根据当前部分更改滚动上的固定徽标颜色 class？

Question

我正在尝试根据您滚动的当前部分更改固定 SVG 徽标的颜色。例如，如果您在带有 class“介绍”或“项目”的部分内滚动，我想用 CSS class.

更改徽标颜色

因此，在进入该部分并在该部分的末尾从顶部和底部滚动以删除和添加之前的 class。

基本上，我有一个包含所有部分的数组，其中包含一个 EventListener 滚动条，它应该在滚动条上切换徽标 class 以及是否在某个部分内。

有人可以帮我吗？

我的代码：

(() => {
    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);
})();

Answer 1

我相信其中一支笔应该能帮到你。你想做的是卷轴间谍。

来自第二笔：

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' );
      }
  } 
}

还有很多其他可用的示例，您只需要知道正确的关键字即可。

根据当前部分更改滚动上的固定徽标颜色 class？

Change fixed logo color on scroll depending of current section class?

javascript

babeljs