更改滚动页上的链接颜色

Question

我需要更改链接颜色，因为它们与类intro和intro2的部分重叠。下面的链接颜色应该一个接一个地改变，因为它们不是一次重叠的(基本上是添加和删除类的使用-倒置颜色，我将使用CSS来改变颜色)。查看本网站的示例https://bakery-theme-v1.myshopify.com/ (社交图标颜色为黑白)

​

class BarracudaOverlapping{
   constructor(){
      this.setOverlaping();
      window.addEventListener("scroll", this.setOverlaping.bind(this));
      window.addEventListener("resize", this.setOverlaping.bind(this));
 }
   setOverlaping(){
      document.querySelectorAll(".et_pb_social_media .et_pb_social_icon .icon").forEach(el=>{
            var overlap = false;
            document.querySelectorAll(".intro,.intro2").forEach(background=>{
               if(this.isOverlapping(el, background))
                  overlap = true;
               });
               if(overlap) 
                        el.classList.add("use-inverted-colors");
               else
                        el.classList.remove("use-inverted-colors");
      });
   }
   check(){
      this.setOverlaping();
   }
   isOverlapping(e1, e2){
      if (e1.length && e1.length > 1) {
      e1 = e1[0];
      }
      if (e2.length && e2.length > 1){
      e2 = e2[0];
      }
      const rect1 = e1 instanceof Element ? e1.getBoundingClientRect() : false;
      const rect2 = e2 instanceof Element ? e2.getBoundingClientRect() : false;
      
      let overlap = false;
   
      if (rect1 && rect2) {
      overlap = !(
         rect1.right < rect2.left || 
         rect1.left > rect2.right || 
         rect1.bottom < rect2.top || 
         rect1.top > rect2.bottom
      );
      return overlap;  
      }
   
      console.warn('Not valid HTMLElement object');
      return overlap;
   }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-weight: 500;
  font-family: "HelveticaNeue";
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
}
section:nth-of-type(2n) {
  background-color: #FE4B74;
}

.intro {
  height: 90vh;
}

.content {
  display: table-cell;
  vertical-align: middle;
}

h1 {
  font-size: 3em;
  display: block;
  color: white;
  font-weight: 300;
}

p {
  font-size: 1.5em;
  font-weight: 500;
  color: #C3CAD9;
}

a {
  font-weight: 700;
  color: #373B44;
  position: relative;
}
a:hover {
  opacity: 0.8;
}
a:active {
  top: 1px;
}

footer {
  padding: 1% 5%;
  text-align: center;
  background-color: #373B44;
  color: white;
}
footer a {
  color: #FE4B74;
  font-weight: 500;
  text-decoration: none;
}
.et_pb_social_media_follow {
    position: fixed;
    left: 30px;
    top: 50%;
}
.icon.use-inverted-colors {
    color: #fff;
}

<section class="intro">  
  <div class="content ">
    <h1>You can create full screen sections without javascript.</h1>
    <p>The height is set to 90vh, that means 90% height.</p>
 </div>
</section>

<section class="intro1">  
  <div class="content ">
    <h1>Resize your browser and see how they adapt.</h1>
 </div>
</section>

<section class="intro2">  
  <div class="content">
    <h1>It's amazing and fast.</h1>
 </div>
</section>

<section>  
  <div class="content">
    <h1>See the <a href="http://caniuse.com/#feat=viewport-units">browser support.</a></h1>
 </div>
</section>

<footer>
  Made by <a href="https://www.twitter.com/ckor">@ckor</a>
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix  et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link  et-social-facebook"><a href="#" class="icon et_pb_with_border" title="Follow on Facebook" target="_blank"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></a></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link  et-social-instagram"><a href="#" class="icon et_pb_with_border" title="Follow on Instagram" target="_blank"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></a></li>
</ul>

​

Answer 1

你试过混合模式吗？它根据其backGround更改颜色。

​

* {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      font-weight: 500;
      font-family: "HelveticaNeue";
    }
    
    section {
      width: 100%;
      padding: 0 7%;
      display: table;
      margin: 0;
      max-width: none;
      background-color: #373B44;
      height: 100vh;
    }
    section:nth-of-type(2n) {
      background-color: #FE4B74;
    }
    
    .intro {
      height: 90vh;
    }
    
    .content {
      display: table-cell;
      vertical-align: middle;
    }
    
    h1 {
      font-size: 3em;
      display: block;
      color: white;
      font-weight: 300;
    }
    
    p {
      font-size: 1.5em;
      font-weight: 500;
      color: #C3CAD9;
    }
    
    a {
      font-weight: 700;
      color: #373B44;
      position: relative;
    }
    a:hover {
      opacity: 0.8;
    }
    a:active {
      top: 1px;
    }
    
    footer {
      padding: 1% 5%;
      text-align: center;
      background-color: #373B44;
      color: white;
    }
    footer a {
      color: #FE4B74;
      font-weight: 500;
      text-decoration: none;
    }
    .et_pb_social_media_follow {
        position: fixed;
        left: 30px;
        top: 50%;
    }
    .icon.use-inverted-colors {
        color: #fff;
    }
    ul {
      mix-blend-mode: difference;
    }
    span {
      color: red;
    }

 <section class="intro">  
    <div class="content ">
      <h1>You can create full screen sections without javascript.</h1>
      <p>The height is set to 90vh, that means 90% height.</p>
   </div>
  </section>
  
  <section class="intro1">  
    <div class="content ">
      <h1>Resize your browser and see how they adapt.</h1>
   </div>
  </section>
  
  <section class="intro2">  
    <div class="content">
      <h1>It's amazing and fast.</h1>
   </div>
  </section>
  
  <section>  
    <div class="content">
      <h1>See the <a href="http://caniuse.com/#feat=viewport-units">browser support.</a></h1>
   </div>
  </section>
  
  <footer>
    Made by <a href="https://www.twitter.com/ckor">@ckor</a>
  </footer>
  <ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix  et_pb_text_align_center et_pb_bg_layout_light">
  <li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link  et-social-facebook"><a href="#" class="icon et_pb_with_border" title="Follow on Facebook" target="_blank"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></a></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link  et-social-instagram"><a href="#" class="icon et_pb_with_border" title="Follow on Instagram" target="_blank"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></a></li>
  </ul>

​

Answer 2

像这样

​

  var links = document.getElementsByClassName('linkClass');
        var intro = document.getElementById("intro");
        var intro1 = document.getElementById("intro1");
        var intro2 = document.getElementById('intro2');
        var content = document.getElementById("content")
       
        window.addEventListener("scroll",() => {
          for(var i=0; i<links.length; i++) {
            var elmPosition =links[i].getBoundingClientRect().top
            if(elmPosition <= intro1.getBoundingClientRect().top){
              links[i].classList.add("whiteClass")
            } else if(elmPosition> intro1.getBoundingClientRect().top && elmPosition < intro2.getBoundingClientRect().top){
              links[i].classList.remove("whiteClass")
              links[i].classList.add("blackClass")
            } else if(elmPosition >intro2.getBoundingClientRect().top && elmPosition < content.getBoundingClientRect().top) {
              links[i].classList.remove("blackClass")
              links[i].classList.add("whiteClass")
            } else if(elmPosition > content.getBoundingClientRect().top){
              links[i].classList.remove("whiteClass")
              links[i].classList.add("blackClass")
            }
          }

        })

    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      font-weight: 500;
      font-family: "HelveticaNeue";
    }
    
    section {
      width: 100%;
      padding: 0 7%;
      display: table;
      margin: 0;
      max-width: none;
      background-color: #373B44;
      height: 100vh;
    }
    section:nth-of-type(2n) {
      background-color: #FE4B74;
    }
    
    .intro {
      height: 90vh;
    }
    #intro1 {
      height: 90vh;
    }
    #intro2 {
      height: 90vh;
    }
    .content {
      display: table-cell;
      vertical-align: middle;
    }
    
    h1 {
      font-size: 3em;
      display: block;
      color: white;
      font-weight: 300;
    }
    
    p {
      font-size: 1.5em;
      font-weight: 500;
      color: #C3CAD9;
    }
    
    a {
      font-weight: 700;
      color: #373B44;
      position: relative;
    }
    a:hover {
      opacity: 0.8;
    }
    a:active {
      top: 1px;
    }
    
    footer {
      padding: 1% 5%;
      text-align: center;
      background-color: #373B44;
      color: white;
    }
    footer a {
      color: #FE4B74;
      font-weight: 500;
      text-decoration: none;
    }
    .et_pb_social_media_follow {
        position: fixed;
        left: 30px;
        top: 50%;
    }
    .icon.use-inverted-colors {
        color: #fff;
    }
   .whiteClass {
    color: white !important;
   }
   span {
    color: white
   }
   .blackClass {
    color: black
   }

  <section class="intro" id="intro">  
    <div class="content ">
      <h1>You can create full screen sections without javascript.</h1>
      <p>The height is set to 90vh, that means 90% height.</p>
   </div>
  </section>
  
  <section class="intro1" id="intro1">  
    <div class="content ">
      <h1>Resize your browser and see how they adapt.</h1>
   </div>
  </section>
  
  <section class="intro2" id="intro2">  
    <div class="content">
      <h1>It's amazing and fast.</h1>
   </div>
  </section>
  
  <section>  
    <div class="content" id="content">
      <h1>See the <a href="http://caniuse.com/#feat=viewport-units">browser support.</a></h1>
   </div>
  </section>
  
  <footer>
    Made by <a href="https://www.twitter.com/ckor">@ckor</a>
  </footer>
  <ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix  et_pb_text_align_center et_pb_bg_layout_light">
  <li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link  et-social-facebook"><a href="#" class="icon et_pb_with_border" title="Follow on Facebook" target="_blank"><span class="et_pb_social_media_follow_network_name linkClass" aria-hidden="true">Follow</span></a></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link  et-social-instagram"><a href="#" class="icon et_pb_with_border" title="Follow on Instagram" target="_blank"><span class="et_pb_social_media_follow_network_name linkClass" aria-hidden="true">Follow</span></a></li>
  </ul>

​