How to change background color on scroll in javascript

Question

I am working on a wordpress website on localhost and using plugin script and style for custom javascript. I want to change the background color when scroll value changes e.g.

scroll value 0-100 then color red

scroll value 100-200 then color blue

scroll value 200-300 then color pink

scroll value 300-400 then color black

scroll value 400-500 then color orange

by this code i am able to add only one class in first condition of javascript.

.site-main{
background-color:green !important;
}
.scrolled1{
background-color:yellow !important;
}
.scrolled2{
background-color:pink !important;
}
.scrolled3{
background-color:black !important;
}
.scrolled4{
background-color:orange !important;
}
.scrolled5{
background-color:red !important;
}

<script>
alert("success");
window.onscroll = function() {myFunction()};

function myFunction() {
if((document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) && (document.body.scrollTop < 100 || document.documentElement.scrollTop < 100)){

document.getElementById("main").className = "scrolled2";
    }

else if((document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) && (document.body.scrollTop < 200 || document.documentElement.scrollTop < 200)){

document.getElementById("main").className = "scrolled3";
    } 
  else {
        document.getElementById("main").className = "site-main";
    }
}
</script>

why the liberal use of important - that just makes overrides and maintenance harder. The only time you should need to use important is if you are overriding an inline style you have no control over — Pete
Thanks Chris G, its working nice. Can you help me little more. All colors are changed in little scroll on by one. i want the scroll distance should be some large for color change. thanks — Tinku

Irina Potapova Irina Potapova · Accepted Answer · 2018-12-07T13:03:35

Please check it. If you need to have #main green when page loaded, just add .site-main class to your div in html.

window.onscroll = function() {myFunction()};

function myFunction() {
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  var elem = document.getElementById("main");
  
  if (scrollTop > 0 && scrollTop < 101) {
  	elem.className = "scrolled5";
  } else if (scrollTop > 100 && scrollTop < 201) {
  	elem.className = "scrolled6";
  } else if (scrollTop > 200 && scrollTop < 301) {
  	elem.className = "scrolled2";
  } else if (scrollTop > 300 && scrollTop < 401) {
  	elem.className = "scrolled3";
  } else if (scrollTop > 400 && scrollTop < 501) {
  	elem.className = "scrolled4";
  } else {
  	elem.className = "site-main";
  }
}

.site-main{
background-color:green !important;
}
.scrolled1{
background-color:yellow !important;
}
.scrolled2{
background-color:pink !important;
}
.scrolled3{
background-color:black !important;
}
.scrolled4{
background-color:orange !important;
}
.scrolled5{
background-color:red !important;
}
.scrolled6 {
  background-color: blue !important;
}

<div id="main" style="height: 10000px;"></div> <!-- temporary height -->

How to change background color on scroll in javascript

1 Answers