在水平滚动的网站上使用路口观察器来更改导航链接？

问题描述

使用相交观察器时遇到麻烦。在Vanilla JS中，我对导航栏链接的颜色进行了编码，以根据视口中的div进行更改，当类为“ black-text”的div进入视口时，观察者只会引起链接的更改。我的一个div“研究电影”行为不正常，链接颜色改为白色。我可能会猜测并说这是因为相交观察器必须在将其称为“ Stills”后将div的链接颜色更改为白色。不确定如何将我的观察者选项更改为不同的根边距和阈值，但这会影响“关于” div的链接颜色更改。

CSS

.tab.active {
   background-color: black;
   color: white;
   
}
.nav-bar a {
   font-family: Helvetica,sans-serif;
   font-weight: bold;
   font-size: 1rem;
   text-decoration: none;
   color: white;
   height: 3vh;
   transition: all 1s;
   padding: 0.5rem 0.5rem 0rem 0.5rem; 
   
}

JS

// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
   tab.addEventListener('click',() => {
      const target = document.querySelector(tab.dataset.tabTarget)

      // tabContents.forEach(tabContent => {
      //    tabContent.classList.remove('active')
      // })
      tabs.forEach(tab => {
         tab.classList.remove('active')
      });
      tab.classList.add('active')
   });


});

const colorElements = document.querySelectorAll('.black-text');
const faders = document.querySelectorAll('.fade-in');

const colorOptions = {
   root: null,// it is the viewport
   threshold: 0,// between zero and one  - how much of the elemtn should in viewport for object to fire an event(1 is 100%)
   rootMargin: "-150px" // margin between firing
};

const colorObserver = new IntersectionObserver(function (entries,colorObserver) {
   entries.forEach(entry => {
      if (!entry.isIntersecting) {
         document.querySelectorAll(".nav-bar > a:not(.active)").forEach(e => e.style.color = "var(--grCol3");
         document.querySelectorAll(".info a").forEach(e => e.style.color = "var(--grCol3");
         audiobtn.style.display = "block";
      } else {
         document.querySelectorAll(".nav-bar > a:not(.active)").forEach(e => e.style.color = "black");
         document.querySelectorAll(".info a").forEach(e => e.style.color = "black");
      }
   })
},colorOptions);

colorElements.forEach(element => {
   colorObserver.observe(element);
})

HTML

<div class="nav-bar">
         <a href="#show" data-tab-target="#show" class="tab">Show</a>
         <a href="#about" data-tab-target="#about" class="tab">About</a>
         <a href="#researchFilm" data-tab-target="#researchFilm" class="tab">Research Film</a>
         <a href="#stills" data-tab-target="#stills" class="tab">Stills</a>
         <a href="#lookbook" data-tab-target="#lookbook" class="tab">Lookbook</a>
      </div>
<main>
      <div class="tab-content animate__animated animate__fadeIn">

         <div id="show" data-tab-content class="active">
            <div class="video-wrapper">
               <video id="catwalk" playsinline autoplay loop muted preload="Metadata">
                  <source src="SAMSON LEUNG MA COLLECTION AW20.mp4" type="video/mp4">
               </video>
            </div>
         </div>

         <div id="about" data-tab-content>
            <div class="about-text black-text">
               <div class="proj-header fade-in">

                  <p> some text here
                  </p>
               </div>
               <div class="about-body">
                  <p class="fade-in">
                     some text here
                  </p>

                  <p class="fade-in">
                     some text here
                  </p>
                  <p class="fade-in">
                     some text here
               </div>
            </div>

         </div>


         <div id="researchFilm" class="black-text" data-tab-content style="width:120vw;">
            <div class="video-wrapper2 fade-in">
                  <p>Mood Film : Final Director’s Statement</p>
               <video id="mood-ma" loop video controls poster="mood-film-bg.png" preload="Metadata">
                  <source src="mood-film-ma (1).mp4" type="video/mp4">
               </video>
            </div>
            <div class="credit">
               <button class="credit-icon">☺</button>
               <div class="credit-text">
         some text here
               </div>
            </div>
         </div>

         <div id="stills" data-tab-content style="width:260vw;">
            <div class="stills"> SOME IMAGES HERE </div>

         </div>

         <div id="lookbook" data-tab-content class="black-text">
            <div class="lookbook-nav">
               <button id="left">←</button>
               <button id="right">→</button>
            </div>
            <div class="lookbook">
               <div class="slider">
               </div>
            </div>
         </div>
      </div>
   </main>

解决方法

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

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

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