html - Bootstrap nav pills active class bug when scrolling with jQuery -

when scroll section of webpage, specific nav pill section light up, shown:

it works expected when scroll home , resume. however, when click on, let's resume, , scroll - observe happens when scroll down contact:

now both resume , contact highlighted. when take piece of code away, works expected. first part smooth transition scrolling (when clicked), , second part scrolling, both written in jquery.

//smooth transition scroll when nav pill clicked //when take code out, works fine var anchor = $('html, body'); $('a').click(function(){     $(anchor).animate({         scrolltop: $($(this).attr('href')).offset().top     }, 500);     return false; });  //change active class when scrolling $(window).scroll(function() {     var position = $(document).scrolltop();      if (position <= home.top) {         $('.home-class').removeclass('active');         $('.resume-class').removeclass('active');         $('.contact-class').removeclass('active');     }      if (position >= home.top) {         $('.home-class').addclass('active');         $('.resume-class').removeclass('active');         $('.contact-class').removeclass('active');     }      if (position > resume.top) {         $('.home-class').removeclass('active');         $('.resume-class').addclass('active');         $('.contact-class').removeclass('active');     }      if (position > contact.top) {         $('.home-class').removeclass('active');         $('.resume-class').removeclass('active');         $('.contact-class').addclass('active');     } }); 

if can point out what's going on, appreciate it.

there logical problem. should compare position larger top position first.

for example if resume.top 500, contact.top 700, position 750..

$(window).scroll(function() {     var position = $(document).scrolltop();      if (position <= home.top) {         $('.home-class').removeclass('active');         $('.resume-class').removeclass('active');         $('.contact-class').removeclass('active');     }      if (position >= home.top) {         $('.home-class').addclass('active');         $('.resume-class').removeclass('active');         $('.contact-class').removeclass('active');     }     /* .resume-class have active class because 701 > 500 */     if (position > resume.top) {         $('.home-class').removeclass('active');         $('.resume-class').addclass('active');         $('.contact-class').removeclass('active');     }      /* .contact-class have active class because 701 > 700 */     if (position > contact.top) {         $('.home-class').removeclass('active');         $('.resume-class').removeclass('active');         $('.contact-class').addclass('active');     } }); 

so need change code this

$(window).scroll(function() {     var position = $(document).scrolltop();      if (position >= contact.top) {         $('.home-class').removeclass('active');         $('.resume-class').removeclass('active');         $('.contact-class').addclass('active');         return;     }      if (position >= resume.top) {         $('.home-class').removeclass('active');         $('.resume-class').addclass('active');         $('.contact-class').removeclass('active');         return;     }      if (position >= home.top) {         $('.home-class').addclass('active');         $('.resume-class').removeclass('active');         $('.contact-class').removeclass('active');         return;     }      if (position < home.top) {         $('.home-class').removeclass('active');         $('.resume-class').removeclass('active');         $('.contact-class').removeclass('active');     } });