Change the Background Color on Scroll using JavaScript

# Table of Contents

# Change the Background Color on Scroll using JavaScript

To change the background color on scroll using JavaScript:

Use the window.scrollY property to get the number of pixels that the document is currently scrolled vertically.
Once the value of the property reaches X pixels, change the background color of the body element.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
        height: 400vh;
        transition: all 0.5s ease;
      }

      h2 {
        position: fixed;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
window.addEventListener('scroll', () => {
  const verticalScrollPx = window.scrollY || window.pageYOffset;

  if (verticalScrollPx < 500) {
    document.body.style.backgroundColor = 'red';
  } else if (verticalScrollPx > 500 && verticalScrollPx < 1000) {
    document.body.style.backgroundColor = 'green';
  } else {
    document.body.style.backgroundColor = 'lightblue';
  }
});

change background color on scroll using javascript

The code for this article is available on GitHub

We added a scroll event listener to the window object.

index.js

Copied!
window.addEventListener('scroll', () => {
  // ...
})

The scroll event is triggered when the document view has been scrolled.

We used the window.scrollY property to get the number of pixels that the document is scrolled vertically.

index.js

Copied!
const verticalScrollPx = window.scrollY || window.pageYOffset;

The window.pageYOffset property is an alias for the scrollY property that is supported in older browsers.

The if statement checks if the user scrolled less than 500 pixels vertically.

If the condition is met, the background color of the body element gets set to red.

index.js

Copied!
if (verticalScrollPx < 500) {
  document.body.style.backgroundColor = 'red';
}

The else if statement checks if the user scrolled more than 500 pixels and less than 1000 pixels.

index.js

Copied!
else if (verticalScrollPx > 500 && verticalScrollPx < 1000) {
  document.body.style.backgroundColor = 'green';
}

Notice that we used the logical AND (&&) operator.

For the else if code block to run, both conditions have to be met.

Finally, the else block is run if the conditions in the if and else if blocks aren't met.

index.js

Copied!
else {
  document.body.style.backgroundColor = 'lightblue';
}

Note that you can add as many else if blocks as necessary.

index.js

Copied!
window.addEventListener('scroll', () => {
  const verticalScrollPx = window.scrollY || window.pageYOffset;

  if (verticalScrollPx < 500) {
    document.body.style.backgroundColor = 'red';
  } else if (verticalScrollPx > 500 && verticalScrollPx < 1000) {
    document.body.style.backgroundColor = 'green';
  } else if (
    (verticalScrollPx > 1000) &
    (verticalScrollPx < 1500)
  ) {
    document.body.style.backgroundColor = 'yellow';
  } else {
    document.body.style.backgroundColor = 'lightblue';
  }
});

change background color on scroll with multiple else if

The code for this article is available on GitHub

# Changing the background color on scroll based on sections using JavaScript

You might also have to change the background color on scroll based on sections of the page.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
        transition: all 0.5s ease;
      }

      .colored-box {
        height: 100vh;
      }

      h2 {
        position: fixed;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div class="colored-box" data-color="red"></div>
    <div class="colored-box" data-color="green"></div>
    <div class="colored-box" data-color="yellow"></div>
    <div class="colored-box" data-color="lightblue"></div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const coloredBoxes = document.querySelectorAll('.colored-box');

window.addEventListener('scroll', () => {
  coloredBoxes.forEach(box => {
    if (
      box.getBoundingClientRect().top <= document.body.scrollTop
    ) {
      document.body.style.backgroundColor = box.dataset.color;
    }
  });
});

change background color on scroll based on sections

The code for this article is available on GitHub

We used the document.querySelectorAll() method to select the div elements that have a class of colored-box.

In the scroll event handler function, we used the NodeList.forEach() method to iterate over the collection of elements.

index.js

Copied!
coloredBoxes.forEach(box => {
  if (
    box.getBoundingClientRect().top <= document.body.scrollTop
  ) {
    document.body.style.backgroundColor = box.dataset.color;
  }
});

The getBoundingClientRect() method returns a DOMRect object that provides information about the size of an element and its position relative to the viewport.

The top property on the DOMRect object returns the top coordinate value.

If the top coordinate value of the div is less than or equal to the number of pixels that the document is scrolled vertically, then the div is in the viewport, so we set the background color of the body element.

Notice that each div has a data-color attribute.

index.html

Copied!
<div class="colored-box" data-color="red"></div>
<div class="colored-box" data-color="green"></div>
<div class="colored-box" data-color="yellow"></div>
<div class="colored-box" data-color="lightblue"></div>

You can access these attributes on the dataset object in your JavaScript code.

index.js

Copied!
document.body.style.backgroundColor = box.dataset.color;

The data- part is omitted when accessing properties via the dataset object.

# Changing the background color of a fixed navbar after scrolling using JavaScript

Another common thing you might have to do is to change the background color of a fixed navigation bar after scrolling.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        height: 500vh;
      }

      #navbar-fixed {
        position: fixed;
        font-size: 2em;
        border: 2px solid black;
        width: 100%;
        height: 50px;
      }

      #navbar-fixed.scrolled {
        background-color: yellowgreen;
        transition: background-color 0.5 ease;
      }
    </style>
  </head>

  <body>
    <div id="navbar-fixed">Navbar - bobbyhadz.com</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const navbar = document.getElementById('navbar-fixed');

const navbarHeightPx = 50;

window.addEventListener('scroll', () => {
  if (
    document.body.scrollTop > navbarHeightPx ||
    document.documentElement.scrollTop > navbarHeightPx
  ) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

change background color of navbar after scrolling

We set the position CSS property of the navbar to fixed, so the element follows the user as they scroll.

style.css

Copied!
#navbar-fixed {
  position: fixed;
  font-size: 2em;
  border: 2px solid black;
  width: 100%;
  height: 50px;
}

If the document's content is scrolled vertically more than the navbar's height, then we use the classList.add() method to add the scrolled class to the element.

Otherwise, we use the classList.remove() method to remove the class from the element.

The scrolled class simply sets a background color with a transition.

style.css

Copied!
#navbar-fixed.scrolled {
  background-color: yellowgreen;
  transition: background-color 0.5 ease;
}

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Change the Background Color on Scroll using JavaScript

# Table of Contents