Change the colour of screen background on scroll

Hey engage24,
I achieved this by adding 5 color sections each with a custom class of: white, blue, red, yellow, and purple and each with a height of 100% with a special heading for reference:

then I added this css:

.turn-white {    
background-color: #fafaf8;
} 
.turn-blue {    
background-color: #3860be;
}   
.turn-red {    
background-color: #c7102a;
transition: background-color .5s ease;
}    
.turn-yellow {    
background-color: #ffa100;
}    
.turn-purple {    
background-color: #2b1378;
}

and added this script to the end of your child theme functions.php file in Appearance ▸ Editor:

function waypoint_change_background_color_scroll() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
    var $sections = $('.avia-section');
    var $white = $(".white");
    var $blue = $(".blue");
    var $red = $(".red");
    var $yellow = $(".yellow");
    var $purple = $(".purple");
    

    $white.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-white');
         $sections.removeClass('turn-purple');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-white');
      	$sections.addClass('turn-purple');
      }
    }, {
      offset: '50%'
    });
    $blue.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-blue');
         $sections.removeClass('turn-white');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-blue');
      	$sections.addClass('turn-white');
      }
    }, {
      offset: '50%'
    });
    $red.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-red');
         $sections.removeClass('turn-blue');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-red');
      	$sections.addClass('turn-blue');
      }
    }, {
      offset: '50%'
    });
    
    $yellow.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-yellow');
         $sections.removeClass('turn-red');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-yellow');
      	$sections.addClass('turn-red');
      }
    }, {
      offset: '50%'
    });
    
    $purple.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-purple');
         $sections.removeClass('turn-yellow');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-purple');
      	$sections.addClass('turn-yellow');
      }
    }, {
      offset: '50%'
    });
 
  })(jQuery);
});
 </script>
  <?php
}
add_action('wp_footer', 'waypoint_change_background_color_scroll');

See my demo page here.

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard