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

Patrick Cameron
Sep 20, 2015 · 2 min read

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 write up a jQuery framework for me to adapt.

What we’re aiming for:

For a much more elegant example, check out the main page of Laura Makes Stuff.

Let’s get started!

Step 1: CSS

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

body {
background: green;
}

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

.changeColor {
background: 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’)
}
if ($(this).scrollTop() < 50) {
$(‘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 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/2.1.4/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 all;
}

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 “< 50”:

$(‘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’)
}
if ($(this).scrollTop() < 50) {
$(‘body’).removeClass(‘colorChange’)
$(‘header’).removeClass(‘displayNone’)
$(‘nav’).addClass(‘navBackgroundStart’)
$(‘nav ul’).removeClass(‘addBlackBackground’)
}
});
});

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

Patrick Cameron

Written by

Ex-messenger, freelance front end developer, @hackeryou student.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade