How to change text-color from black to white while scrolling over images

Question

I am building a website with a lot of images. On the sidebar is a text (which stays in place with position: sticky), I would like it to change its color from black to white while overlapping the images it passes while scrolling down the webpage. How do I do that?

I found a Codepen-example, doing exactly this. But it's complicated to extract the requested code since the Javascript also handles a scrolling animation. https://codepen.io/Atise/pen/WNOmyxY

My sidenav functions like this one: https://codepen.io/clairecodes/pen/bvWKdr

I have given this a second thought: The problem with this approach is that it won't work on an ordinary website while scrolling through its length vertically. The white text should only be visible when approached by the navbar. To make this work, the images needs to have some trigger that shows the text (.section-title.on-dark) only when being approached by the navbar.

<div class="outer-container">
    <div class="image-container" style="background-image: url('https://images.unsplash.com/photo-1570528812862-9984124e7e22?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
    
    <style>
      body {
     margin: 0;
     min-height: 3000px;
     font-family: 'Montserrat', sans-serif;
}
 .outer-container {
     max-width: 600px;
     margin: auto;
     width: 90%;
     padding: 200px 0px;
     position: relative;
}
 .image-container {
     padding-bottom: 100%;
     background: black;
     position: relative;
     overflow: hidden;
     z-index: 2;
     background-size: cover;
     background-position: center;
}
 .section-title {
     margin: 0;
     font-size: 64px;
     width: 100%;
     text-align: center;
     position: absolute;
     top: 50%;
     left: -30%;
     transform: translateY(-50%);
     z-index: 1;
     white-space: nowrap;
}
 .section-title.on-dark {
     color: white;
}
 .section-title span {
     position: relative;
     display: block;
}
    </style>
    
        <h2 class="section-title on-dark">
            <span class="paralax-title">
                Live The Adventure
            </span>
        </h2>
    </div>
    
    <h2 class="section-title">
        <span class="paralax-title">
            Live The Adventure
        </span>
    </h2>
</div>

    <script>
      let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');

const scrollInProgress = () => {
    didScroll = true
}
const raf = () => {
    if(didScroll) {
        paralaxTitles.forEach((element, index) => {
            element.style.transform = "translateX("+ window.scrollY / 10 + "%)"
        })
        didScroll = false;
    }
    requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress)
    </script>

Answer 1

You're prebably looking for mix-blend-mode.

.bg {
  width: 200vw;
  height: 200vh;
  background-image: url(https://images.pexels.com/photos/7718429/pexels-photo-7718429.jpeg);
  background-size: cover;
}

.text {
  margin: 0;
  font-size: 50px;
  position: fixed;
  color: white;
  mix-blend-mode: difference;
}

<div class="bg">
  <h1 class="text">Lorem Ipsum</h1>
</div>

There are values other that difference. Read the MDN Docs and find the value that best suits your website.