-2

I'm fairly new to JavaScript however I do understand HTML and CSS (in the process of learning JavaScript). I need to be able to set the background colour of the page depending on where the user has scrolled to. It will be a colour on the gradient between black->white.

Harry Day
  • 378
  • 4
  • 13
  • Hello. Welcome to StackOverflow. Questions which show no attempt on the part of the asker are usually discouraged on StackOverflow. Please consider reading the [How to Ask](https://stackoverflow.com/help/how-to-ask) guide and updating your question. – Chirag Ravindra Apr 30 '18 at 07:02
  • To help you explore this topic on the web, what you are essentially looking to do is 1)[Capturing the event when the user scrolls](https://stackoverflow.com/questions/10605197/detect-if-user-is-scrolling) 2) Finding out where the user is on the page using [scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) 3) [Compute color from that](https://stackoverflow.com/questions/17525215/calculate-color-values-from-green-to-red) and 4) [Set the background color](https://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript) – Chirag Ravindra Apr 30 '18 at 07:11

2 Answers2

2

The Code works, but not on this Website, because it doesnt detect the body's .scrollTop Have fun!!!

function scroll(){
 var body = document.body,
    html = document.documentElement;
 var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
 var color = Math.round(((body.scrollTop + html.offsetHeight) / height) * 255);
 body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}
html{
 height: 100%;
}
body{
 height: 200%;
 background: rgb(126,126,126);
}
<html>
 <head>
 </head>
 <body onscroll="scroll()">
 </body>
</html>
Konrad Schewe
  • 55
  • 1
  • 7
0

Here is what I'm using for this:

window.onscroll = function() {scrollFunction()} ;
function scrollFunction() {
// After scrolling down "number"px, the background-color changes
    if(document.body.scrollTop >=300 || document.documentElement.scrollTop >= 300){
        document.getElementsByTagName("body")[0].style.backgroundColor = "blue";
    }
 else if (document.body.scrollTop >= 100 || document.documentElement.scrollTop >= 100) {
        document.getElementsByTagName("body")[0].style.backgroundColor = "red";
    } 
 
 else{
  document.getElementsByTagName("body")[0].style.backgroundColor = "black";
 }
}
body{
 background-color:black;
 color:white;
}
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br><br><br><br><br><br><br><br><br><br><br><br>
K. P.
  • 540
  • 5
  • 17
  • 1
    Thanks for the answer. However, I would like to point out that this does not actually answer the question (the question wants the color to be a gradient between black and white as a function of the scroll position) AND the asker has not demonstrated any effort to actually solve the problem. It is not a good idea to encourage 'give me code' questions as it does not fit in well with the philosophy of StackOverflow – Chirag Ravindra Apr 30 '18 at 08:45