当cooresponsing div滚动到时，将类添加到适当的导航选项卡中

Question

我读过类似的问题，并研究过scrollspy，但我不相信它能达到我想要的效果，因为据我所知，它只能使用引导程序风格的突出显示。(如果它能做得更多，请让我知道！)

我有一个4选项卡的导航栏(通常固定在顶部)和一个单页网站。每个选项卡对应于页面的不同部分，每个部分都有不同的背景色。我想做的是，每当滚动到该区域时，将选项卡的颜色更改为与相应部分的背景颜色相同(因此，只有当新部分的顶部到达导航栏的底部时，它才会更改颜色。)我只有在单击选项卡时才达到这种效果，触发滚动事件并添加活动类，但是，如果不使用单击，则活动选项卡将保留，从而产生问题。

有没有办法根据当前滚动位置更改变量？我试过了我能想到的，但还没有奏效。

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>

这是一个小提琴，但由于某种原因，我无法让ng点击和ng类来处理它，这会改变选项卡的颜色。

以下是一些不在js-fiddle上的图片：我想要和拥有的：http://i.gyazo.com/3c7d6d80a9a490b31e795cacebbaa1a0.pnghttp://i.gyazo.com/1bd597080bdba6ffa34fe18cf5462b74.png我不想要但仍然拥有：http://i.gyazo.com/d066effabd276d978e4775666a3b5d6c.png

如果有人有解决方案，我会非常棒！非常感谢。

Answer 1

获取div到顶部的距离：

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

注意：在声明distance时不要使用var，因为您无法在函数中访问它

然后检查div是否已到达顶部并添加class:

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