Snippet: Change background color after scrolling on page!

programming web dev
1

A simple snippet I created to help out a Twitterer where the background color changes as you scroll down on the page:

<head>
  <title>Change Color on Scroll</title>

  <style>
    body {
      background-color: yellow;
      transition: all 1s ease-in;
    }
    div {
      min-height: 2000px;
    }
    .color {
      background-color: red;
    }
  </style>

</head>

<body>
  <div>

  </div>

  <script>
    window.addEventListener("scroll", scrolling, false);

    function scrolling(e) {
      // change background color after scrolling 500 pixels
      if (window.pageYOffset > 500) {
        document.body.classList.add("color");
      } else {
        document.body.classList.remove("color");
      }
    }
  </script>
</body>

Cheers,
Kirupa :stuck_out_tongue: