Change Background And Text Colour On Scroll Code
⬇ Test it by scrolling down to the bottom of the page ⬇
Scroll down
Background HTML
<body style="background-color:#04132a;">
</body>
<script>
window.addEventListener('scroll', function() {
var body = document.querySelector('body');
var scrollPosition = window.scrollY;
if (scrollPosition > 150) {
body.style.backgroundColor = '#3a5399';
} else {
body.style.backgroundColor = '#04132a';
}
});
</script>
Text HTML
<p id="scroll-text">Hello, World!</p>
<script>
window.addEventListener('scroll', function() {
var text = document.querySelector('#scroll-text');
var scrollPosition = window.scrollY;
if (scrollPosition > 150) {
text.style.color = '#04132a';
} else {
text.style.color = 'white';
}
});
</script>
Text CSS
#scroll-text {
color: white;
font-size: 18px;
font-family: 'georgia';
font-weight: bold;
text-align: center;
}
