# Snippet: Change background color after scrolling on page!

**URL:** https://forum.kirupa.com/t/snippet-change-background-color-after-scrolling-on-page/634966
**Category:** web dev
**Created:** [July 21, 2016, 3:39pm UTC](https://forum.kirupa.com/t/snippet-change-background-color-after-scrolling-on-page/634966 "2016-07-21T15:39:38Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [July 21, 2016, 3:39pm UTC](https://forum.kirupa.com/t/snippet-change-background-color-after-scrolling-on-page/634966/1 "2016-07-21T15:39:38Z")

</div>

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 😛
