A complete beginner’s guide to: changing background colour on scroll using jQuery

Updated December 2020

This is an attempt to help someone who is familiar with HTML and CSS, but not Javascript, set up a simple effect that will change their page’s background colour when the user scrolls down.

One of my HackerYou instructors Nat Cooper was nice enough to help me figure out this solution.

What we’re aiming for:

Here’s a working example on CodePen: https://codepen.io/patrickcameron/pen/WNGrpEw

Let’s get started!

Step 1: CSS

First of all, we need to set a beginning background colour on our body:

body {
   background-color: green;
}

Next, we’ll make a new CSS class with the background colour we want to switch to when the user scrolls down:

body.changeColor {
   background-color: white;
}

Step 2: JavaScript

Make a new text document called scripts.js in the same folder as your index.html file. Paste the following code in and save:

$(function() {
   $(window).scroll(function () {
      if ($(this).scrollTop() > 50) {
         $(‘body’).addClass(‘changeColor’)
      } else {
         $(‘body’).removeClass(‘changeColor’)
      }
   });
});

If you’re a beginner like me, just glancing at this code probably makes your eyes glaze over. But it’s actually quite simple. When our visitor scrolls more than 50 pixels down, we add the class changeColor to the body, changing the background from green to white. When they scroll back up, we remove the changeColor class and the background goes back to green.

Step 3: HTML

Finally, at the bottom of our HTML document, just before the </body> tag, we want to paste in the following text:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</body>

The first tag is pointing to a general jQuery library hosted by Google. The second tag is pointing to the JavaScript file we just made.

Step 4 (optional): Make the background change smoother with some CSS

IMHO the effect looks nicer when when the new background colour fades in, rather than a sudden change. All we need for this is a simple CSS effect called “transition”.

In our CSS file, let’s change the body code to:

body {
  background: green;
  transition: 0.3s background-color;
}

0.3s is the amount of time the transition effect takes. Feel free to change this.

Step 5: Experiment!

Once you understand the basic idea of how it works, you can edit your CSS and Javascript files to add, remove and change any element you want when the user scrolls down.

For example, create a new CSS class:

.displayNone {
   display: none;
}

And in the Javascript file, add this below “> 50”:

$(‘header’).addClass(‘displayNone’)

and this below “else”:

$(‘header’).removeClass(‘displayNone’)

Now your header element will disappear when the user scrolls down.

Here is how my code turned out for all the elements on my project, if you’re curious:

$(function() {
$(window).scroll(function () {
   if ($(this).scrollTop() > 50) {
      $(‘body’).addClass(‘colorChange’)
      $(‘header’).addClass(‘displayNone’)
      $(‘nav’).removeClass(‘navBackgroundStart’)
      $(‘nav ul’).addClass(‘addBlackBackground’)
   } else {
      $(‘body’).removeClass(‘colorChange’)
      $(‘header’).removeClass(‘displayNone’)
      $(‘nav’).addClass(‘navBackgroundStart’)
      $(‘nav ul’).removeClass(‘addBlackBackground’)
   } 
});
});

The full code

The complete project files can be found here.

Please let me know how I can improve this tutorial. Was it simple to follow? Confusing? Feedback is always appreciated!