javascript - Change color of logo from color 1 to color 2 back to color 1

Question

Closed. This question needs debugging details. It is not currently accepting answers. question from:https://stackoverflow.com/questions/65934561/change-color-of-logo-from-color-1-to-color-2-back-to-color-1

Answer 1

You need to get distance of elements from top using offsetTop to detecting that scroll is between two elements.

const nav = document.querySelector('#logo');
const back1 = document.querySelector('.background1');
const back2 = document.querySelector('.background2');

nav.className = 'blend'
window.onscroll = () => {
  if(back1.offsetTop+back1.offsetHeight < this.scrollY && this.scrollY < back2.offsetTop)
    nav.className = 'color';
  else 
    nav.className = 'blend';
};

*{
  padding: 0;
  margin: 0;
  height: 200vh;
}

.background1{
  background-color: black;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
}
.background2{
  background-color: black;
  height: 100%;
  width: 100%;
  position: absolute;
}
#logo{
  position: fixed;
  z-index: 2;
}
.blend a{
  color: white;
}
.color a{
  color: green;
}

<div class="background1"></div>
<div id="logo" class="nav color">
  <a>LOGO</a>
</div>
<br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br>
<div class="background2"></div>
<br><br><br><br><br><br><br><br><br><br><br>
.