Class Elements

<!DOCTYPE html>
<html>
<head>
<style>
.test {
  background-color: yellow;
}
</style>
</head>
<body style="height:1500px">

<p>Scroll down this page</p>

<p id="myP" style="position:fixed">When you have scrolled 50 pixels from the top of this page, add the class "test" (yellow background color) to this paragraph. Scroll up again to remove the class.
</p>

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

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}
</script>

</body>
</html>

Scroll down this page

When you have scrolled 50 pixels from the top of this page, add the class "test" (yellow background color) to this paragraph. Scroll up again to remove the class.