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

【问题标题】：Change fixed logo color on scroll depending of current section class?根据当前部分类更改滚动上的固定徽标颜色？
【发布时间】：2021-09-28 08:15:35
【问题描述】：

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

因此，在进入该部分并在该部分的 END 处从顶部和底部滚动以删除和添加上一个类。

基本上，我有一个包含所有部分的数组，其中包含一个 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);
})();

【问题讨论】：

标签： javascript babeljs

【解决方案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' );
      }
  } 
}

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

【讨论】：