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

Question

I use this code to change the color of id="logo" from white to green. But I want to change the color back to white when I have scrolled all the way down to the bottom of the site.

I have tried with else if but haven't got the else if function to work..

const nav = document.querySelector('#logo');
  nav.className = 'blend'
  window.onscroll = () => {
    if(this.scrollY >= window.innerHeight-80) nav.className = 'color';
    else nav.className = 'blend';
  };

.blend a{
  color: white;
}

.color a{
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="logo" class="nav color">
  <a>LOGO</a>
</div>

The code work correctly. Check https://jsfiddle.net/wr4ds3j0/ — Mohammad, Jan 28 '21 at 09:56
@Mohammad no - it doesn't go back to white when "scrolled all the way down to the bottom of the site" — freedomn-m, Jan 28 '21 at 10:16
You need to add a check for: `this.scrollY + window.innerHeight == document.documentElement.scrollHeight)` to see when it's at the bottom of the scroll — freedomn-m, Jan 28 '21 at 10:26
Oh yes, I think https://jsfiddle.net/mjw205xz/ is what OP want — Mohammad, Jan 28 '21 at 10:28
Not also that `()=> { this` may not be what you're expecting. In this case it's the `window`, which *is* what you're expecting, but not because it's from `window.onscroll`. See https://stackoverflow.com/a/17514482/2181514 point 8. — freedomn-m, Jan 28 '21 at 10:28
Here is a new fiddle https://jsfiddle.net/go2aw5yb/1/ i want the logo to be green on the when its white and back to white on the footer. But now i turns green and back to white to quick.. — Vetlesen, Jan 28 '21 at 11:43
I think this is what you want https://jsfiddle.net/8xvap5f2/ — Mohammad, Jan 28 '21 at 12:14
It may be that intersectionObserver could help - it has the advantage that it's asynchronous, the browser worries about how best to implement it and you don't have to spend time doing things on every user bit of scrolling. — A Haworth, Jan 28 '21 at 12:59

score 0 · Accepted Answer · answered Jan 28 '21 at 12:32

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>
.

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

1 Answers1