Title: Having trouble using jQuery to change a class dependent on scroll position
Tags: javascript;jquery;scroll;anchor
Question: Some very helpful folks wrote and then modified a script to change the class on a nav item when scrolling the page to a related section. Here's the original post: Use jQuery to change a class dependent on scroll position.
My first issue is that the last section of the array is being ignored. Someone else had this question and a solution was offered, which worked for them, but not for me: jQuery class change based on scroll ignoring last section.
The second issue is that even setting aside that the last section in my array is not ever getting selected, the new class name is only getting added to my nav items, but never removed, so that by the time I scroll to the bottom of the page, every item except the last in my nav has "selected" as a class. I'd really appreciate any insight. Here's my code, which is virtually identical to the modified version, except I'm using headings rather than sections (which is maybe significant?):
var $anchs = $('.content h1');
var $navs = $('#zone-submenu div .content &gt; .item-list &gt; ul &gt; li');
topsArray = $anchs.map(function(){
return $(this).position().top - 100;
}).get(),
topsArray.push(window.height);
var len = topsArray.length;
var currentIndex = 0;
var getCurrent = function( top ) {   // take the current top position, and see which
for( var i = 0; i < len; i++ ) {   // index should be displayed
if( top &gt; topsArray[i] &amp;&amp; topsArray[i+1] &amp;&amp; top < topsArray[i+1] ) {
return i;
}
}
};
$(document).scroll(function(e) {
var scrollTop = $(this).scrollTop();
var checkIndex = getCurrent( scrollTop );
if( checkIndex !== currentIndex ) {
currentIndex = checkIndex;
$navs.eq( currentIndex ).addClass("selected").siblings(".selected").removeClass(".selected");
}
});
I'm afraid I can't post the site itself - it's in development and I can't reveal it before it goes live. Thanks for any help, though!
Comment: Note that you write `removeClass(".selected")` though. I think what you mean here is `removeClass("selected")` ?

Here is the accepted answer: This looks a bit odd:
currentIndex = checkIndex;
$navs.eq( currentIndex ).addClass("selected").siblings(".selected").removeClass(".selected");
From what I can tell in your code, it should be:
$navs.eq( currentIndex ).removeClass('selected');  // no dot
currentIndex = checkIndex;
$navs.eq( currentIndex ).addClass("selected");
UPDATED
Fixing the "not displaying the last index item" ...
You are referencing an invalid array element in your getCurrent function - [i+1] is invalid when i == len-1. You need to just return the last element if that happens.
var getCurrent = function( top ) {   // take the current top position, and see which
for( var i = 0; i < len-1; i++ ) {   // index should be displayed
if( top &gt; topsArray[i] &amp;&amp; topsArray[i+1] &amp;&amp; top < topsArray[i+1] ) {
return i;
}
return len-1;
Comment for this answer: I don't think so. See @Jules' comment.
Comment for this answer: If my answer was correct, I'd appreciate you checking it as the answer.
Comment for this answer: I knew something looked wrong in that one chained line. It didn't actually quite work for me til I changed "checkIndex" in the first line to "currentIndex". That doesn't seem like it should work...but it does! Thanks so much! Now I just have to figure out my index issue...
Comment for this answer: Sorry - new to posting here - I would be happy to, but if I check it, will it close the issue? because I still have a problem with the index/last item in the array - and then if someone answers that, I suppose I can't choose two people's answers as "THE" answer. :/ I don't suppose you can see going on with that? I have new information, too - since your fix, as I scroll by the last h1 on the page, the class is removed from the second-to-last item, just not added to the last one...
Comment for this answer: Yes, you rock! Thanks again and happy new year!
Comment for this answer: Sorry, I'm back...I just discovered that when I'm scrolling from the top of the page down to my first anchor, the checkIndex value gets set to the last in the array, so that means my last item gets highlighted...once I hit the first anchor, it all works fine, it's just the space between the top of the page and the first anchor. It's weird, because the initial value of it is set to 0, so I can't tell why it jumps to the end since I don't think that any of the conditions in the loop are being met...
Comment for this answer: Nvm - found it. My nav is not fixed at the top, but floats up til it hits the top and becomes fixed, so I had to add the height of the nav to scrollTop.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2011:00:12/30/11', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<javascript><jquery><scroll><anchor>', 'Title': 'Having trouble using jQuery to change a class dependent on scroll position', 'ViewCount': 572, 'id': 8680878, 'user_AboutMe': None, 'user_AccountId': 1138562.0, 'user_DisplayName': 'Allison Sigrist', 'user_Reputation': 33.0, 'user_Views': 12.0, 'user_id': 1123091.0}}