javascript - 当相应的 div 滚动到时，将类添加到适当的导航选项卡

Question

我读过类似的问题并研究了滚动 spy ，但我不相信它能完全满足我的要求，因为据我所知它只能使用引导样式突出显示。 (如果它可以做更多，请告诉我!)

我有一个 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>

这是一个fiddle ，但由于某种原因，我无法让 ng-click 和 ng-class 对其进行处理，这会更改选项卡颜色。

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

如果有人有解决方案，我将非常感激!谢谢!

Answer 1

获取 div 距顶部的距离:

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

note: do not use var when declaring distance because than you can't access it inside a function

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

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