Я довольно новичок в JavaScript, но я понимаю HTML и CSS (в процессе изучения JavaScript). Мне нужно иметь возможность установить цвет фона страницы в зависимости от того, где пользователь прокрутил. Это будет цвет на градиенте между черным-> белым.
Код работает, но не на этом Веб-сайте, потому что он не обнаруживает .scrollTop тела Веселитесь !!!
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>
Вот что я использую для этого:
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>