Change text color black to white on overlap of bg

Question

I have a div that is positioned absolute with a background color gradient. I have this text on it that I want to change to the color white as I scroll the text up.

I

Answer 1

You could do this with some javascript:

$(document).ready(function() {
  $(window).scroll(function() {
    var bgHeight = $('.bg-container').height();
    var scroll = $(window).scrollTop();
    $('.scroll-content p').each((i, el) => {
      var pPos = $(el).offset().top;
      var pHeight = $(el).height();

      if (pPos < (scroll - pHeight + bgHeight)) {
        $(el).removeClass('black');
        $(el).addClass('white');
      } else {
        $(el).addClass('black');
        $(el).removeClass('white');
      }
    });
  })
})

.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-image: linear-gradient(to bottom, rgb(1, 55, 124) 15%, rgb(81, 155, 244));
}

.scroll-content {
  position: relative;
  z-index: 99999;
  font-family: neuzeit-grotesk, sans-serif;
  font-weight: 700;
}

.white {
  color: #fff;
}

.black {
  color: black;
}

  

     
  









  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf
  
asdf