Scroll to change the background

Abruptly. By fade in and fade out. Demo for https://toster.ru/q/309680

by Gleb Kemarsky

HTML

<div class="bg"></div>
<div class="bg-blue"></div>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>
<p>Scrool up and down to change the background.</p>

CSS

.bg, .bg-blue {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%; 
  z-index: -4; 
}

.bg {
  background: orange;
  height: 100%;
  width: 100%; 
  z-index: -4; 
}

.bg-blue {
  background: blue;
  z-index: -3; 
  display: none; 
}

JavaScript

$(document).ready(function(){

	var $bg_blue = $('.bg-blue');
	var bg_state = null;

  $(window).scroll(function() {
		if ($(this).scrollTop() > 100) {
			if (bg_state != 'blue') {
				bg_state = 'blue';
				$bg_blue.stop().fadeIn("slow");
			}
		} else {
			if (bg_state != 'orange') {
				bg_state = 'orange';
				$bg_blue.stop().fadeOut("slow");
			}
		}
  });
    
});//jQuery