Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Paul Roberts
Paul Roberts
7,928 Points

jQuery: Change Active Class on Scroll

Hey there,

I'm struggling with jQuery. My plan is to add an active class when you scroll down a HTML page. At certain break points the active class will be added to a different child. Here is my JSFiddle:

http://jsfiddle.net/3saewht9/

My first two bits of jQuery work but I don't understand why my third one doesn't. Please could someone help! :)

Edit: Thanks a lot guys! Really helpful replies :D

3 Answers

MIke Allen
MIke Allen
9,727 Points

Hey Paul,

I think the reason is because your screen position variable never changes. It is always 0. This is because you have declared it in the global scope so that way when the page loads it reads

var screenPosition = $(document).scrollTop()

Set it to zero (its current location) and forgets about it.

I fixed this by adding in a local variable to 3rd function which then updates every time the user scrolls (Its really cool to check this is the console.log and see the variable increment as you scroll.)

Here is what the function looks like now.

$(document).ready(function(){
    $(window).scroll(function(){
      var currentScreenPosition  = $(document).scrollTop();
    if (currentScreenPosition > divThreeHeight) {
    $( "ul li:nth-child(3)" ).addClass( "active" );
    };
    });
});

Hope that helps!

Andrew Robinson
Andrew Robinson
16,372 Points
Andrew Robinson
Andrew Robinson
16,372 Points

You're only setting the screenPosition once, you need to be constantly updating it as they scroll, when the user scrolls for the first time, the screenPosition is smaller than the height of the div, but it's always staying at it's initial value.

A quick fix I tried was adding this in each .scroll event: 

screenPosition = $(document).scrollTop();

I'd most likely put it in it's own event though so it's a bit cleaner.

Edit: A bit late to the party!

Also wanted to point out, if you're wanting it to active when they reach the top of the third div, you need to make sure that:

  if (screenPosition > divThreeHeight * 2)

otherwise it'll activate at the top of the second div, again there's probably a much neater way of achieving this, I'm not sure if there's something to detect how far down an element is on the page.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You can use jQuery's .offset() to determine how far down the page an element is.

Wesley Wright
Wesley Wright
26,793 Points
Wesley Wright
Wesley Wright
26,793 Points

I put together a jsfiddle that should help. You need to call scrollTop every time the scroll() event is triggered to get the new location of window. Hope this helps.

http://jsfiddle.net/2fzu08d4/11/