javascript - Add class to appropriate nav tab when cooresponding div is scrolled into -

i have read similar questions , researched scrollspy, don't believe quite i'm looking for, since far can tell can use bootstrap style highlighting. (if can more please let me know!)

i have 4-tab navbar (usually fixed top) , single-page site. each tab corresponds different section of page, , each section has different background color. i'd change tab color same corresponding section's background color whenever region scrolled (so change color once new section's top reaches navbar's bottom.) have achieved effect when tab clicked, triggering scroll event , adding active class, active tab remain if clicking not used, creating problem.

is there way change variable based off current scroll location? have tried can think of hasn't worked yet.

js

$(window).on('scroll', function () {             if ($(window).scrolltop() >= $('#homecontainer').height()) {                 $('.menudiv').addclass('fixed');             } else {                 $('.menudiv').removeclass('fixed');             }         });   $("#menuhomebutton").click(function(e){             $('html, body').animate({                 scrolltop: $('#homecontainer').offset().top             }, 'slow');         });          $("#menuaboutbutton").click(function(e){             $('html, body').animate({                 scrolltop: $('#aboutcontainer').offset().top + 1             }, 'slow');         });          $("#menuportfoliobutton").click(function(e){             $('html, body').animate({                 scrolltop: $('#portfoliocontainer').offset().top - $('.menudiv').height() + 1             }, 'slow');         });          $("#menucontactbutton").click(function(e){             $('html, body').animate({                 scrolltop: $('#contactcontainer').offset().top - $('.menudiv').height() + 1             }, 'slow');         }); 

html

<div class="maincontainer">      <div class="container blue" id="homecontainer">     </div>     <div class="menudiv"><!--             --><div class="menuitem" id="menuhomebutton" ng-class="{'active':selectedtab === 'home'}" ng-click="selectedtab = 'home'">         <div class="menutextdiv"><p>home</p></div><div class="menuitemcolor blue"></div>     </div><!--             --><div class="menuitem" id="menuaboutbutton" ng-class="{'active2':selectedtab === 'about'}" ng-click="selectedtab = 'about'">         <div class="menutextdiv"><p>about</p></div><div class="menuitemcolor blue2"></div>     </div><!--             --><div class="menuitem" id="menuportfoliobutton" ng-class="{'active3':selectedtab === 'portfolio'}" ng-click="selectedtab = 'portfolio'">         <div class="menutextdiv"><p>portfolio</p></div><div class="menuitemcolor blue3"></div>     </div><!--             --><div class="menuitem" id="menucontactbutton" ng-class="{'active4':selectedtab === 'contact'}" ng-click="selectedtab = 'contact'">         <div class="menutextdiv"><p>contact</p></div><div class="menuitemcolor blue4"></div>     </div><!--         --></div>     <div class="container blue2" id="aboutcontainer">     </div>     <div class="container blue3" id="portfoliocontainer">     </div>     <div class="container blue4" id="contactcontainer">     </div>     <div class="container">     </div>  </div> 

here fiddle, reason couldn't ng-click , ng-class work on it, changes tab color.

here images of looks not on js fiddle: want , have: http://i.gyazo.com/3c7d6d80a9a490b31e795cacebbaa1a0.png http://i.gyazo.com/1bd597080bdba6ffa34fe18cf5462b74.png don't want still have:http://i.gyazo.com/d066effabd276d978e4775666a3b5d6c.png

if has solution i'd extremely greatful! thank you!

get distance of div top:

distance = $("div").scrolltop() 

note: not use var when declaring distance because can't access inside function

then check if div has reached top , add class:

$(window).on('scroll', function () {      if(distance - $("div").scrolltop() >= distance ){         //do     }  });