Dynamically change navbar color on scroll

Question

I found this great solution here on stack:

const [red, green, blue] = [69, 111, 225]
const section1 = document.querySelector('.section1')

window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset) / 150
  y = y < 1 ? 1 : y // ensure y is always >= 1 (due to Safari's elastic scroll)
  const [r, g, b] = [red/y, green/y, blue/y].map(Math.round)
  section1.style.backgroundColor = rgb(${r}, ${g}, ${b})
})

But I'd like to change my color from rgba(249, 82, 4, 1) to white. Any help is very much appreciated.

Did you want it to 'morph' or just change with a fade-in? – Joel Hager May 12 '20 at 19:17 — Joel Hager, May 12 '20 at 19:17
Just slowly fade from the orange colour to white. Thanks! – Mariana Stefani May 12 '20 at 19:20 — Mariana Stefani, May 12 '20 at 19:20

Kirill Simonov · Accepted Answer · 2020-05-12T20:05:31.347

Tweaking the computations a little, you could get something like this (instead of reducing the rgb values and fading to black, we are now increasing them and hence fading to white):

const [red, green, blue] = [249, 82, 4];
const section1 = document.querySelector('.navbar');

window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset);
  y = y < 1 ? 1 : y;
  const [r, g, b] = [red + y, green + y, blue + y].map(Math.round);
  section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
})

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgb(249, 82, 4);
  height: 50px;
  width: 100%;
  transition: background-color 200ms ease;
}
.section {
  background: rgb(249, 82, 4);
  height: 300%;
 
}

<html>
<body>
  <section class="navbar">
  </section>
  <section class="section">
  </section>
</body>
</html>

That's great! Thanks! – Mariana Stefani May 13 '20 at 13:30 — Mariana Stefani, May 13 '20 at 13:30

Dynamically change navbar color on scroll

1 Answers1