更改相交观察器中的根

问题描述

当某些部分相交时，我正在尝试使页面的标题更改样式/类。我已经改编了现有的代码，但是当截面大于视口时，无法触发它。

根据我在IO上可以找到的信息，我尝试将根更改为标头，而不是视口，但仍然无法正常工作。

我有限的知识将我带到了我所能走的最深处，因此将不胜感激。

    const intersectionRoot = document.querySelector('header');

const sections = document.querySelectorAll('.headercolor');
const config = {
  root: document.getElementById(header),rootMargin: '0px',threshold: [.1,.9]
};

const observer = new IntersectionObserver(function (entries,self) {
  entries.forEach(entry => {
    console.log(entry); // log the IO entry for demo purposes
    console.log(entry.target); // here you have the Element itself. 
    // you can test for className here for example 
    if (entry.isIntersecting) {
      var headerEl = document.querySelector('header');
      if (entry.intersectionRatio > 0.9) {
        //intersection ratio bigger than 90%
        //-> set header according to target
        headerEl.className=entry.target.dataset.header;      
      } else {
        //-> check if element is coming from top or from bottom into view
        if (entry.target.getBoundingClientRect().top < 0 ) {
          headerEl.className=entry.target.dataset.header;
        }
      } 
    }
  });
},config);
sections.forEach(section => {
  observer.observe(section);

});



 <header id="myheader">
 <p>Header Content </p>
</header>

<div class="grid-30-span g-100vh headercolor" style="background-color:darkblue;" data-header="header-white"><br><br><br><br>white
</div>

<div class="grid-30-span g-100vh headercolor" style="background-color:lightgrey;" data-header="header-black">
  black
</div>

<div style="height:2000px;content:'';background-color:tomato;" class="grid-30-span headercolor" data-header="header-white"> white
</div>

<div class="grid-30-span g-100vh headercolor" style="background-color:lightgrey;" data-header="header-black">black
  
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

header intersection-observer