Question

我已经阅读了类似的问题并研究过scrollspy，但我不相信它会完全符合我的要求，因为据我所知它只能使用bootstrap样式突出显示。（如果它能做得更多，请告诉我！）

我有一个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小提琴上看起来不像的一些图片：我想要的和拥有的： http://i.gyazo.com/3c7d6d80a9a490b31e795cacebbaa1a0.png http://i.gyazo.com/1bd597080bdba6ffa34fe18cf5462b74.png 我不想要但仍然有：http://i.gyazo.com/d066effabd276d978e4775666a3b5d6c.png

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

Answer 1

从顶部获取 div 的距离：

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

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

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

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

当cooresponding div滚动到

1 个答案: