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

Question

I have read similar questions and researched scrollspy, but I don't believe it will do quite what I'm looking for, since as far as I can tell it can only use bootstrap style highlighting. (If it can do more please let me know!)

I have a 4-tab navbar (usually fixed top) and a single-page site. Each tab corresponds to a different section of the page, and each section has a different background color. What I'd like to do is change the tab color to be the same as the corresponding section's background color whenever that region is scrolled to (so it will only change color once the new section's top reaches the navbar's bottom.) I have achieved this effect only when the tab is clicked, triggering a scroll event and adding an active class, however the active tab will then remain if clicking is not used, creating the problem.

Is there a way to change a variable based off the current scroll location? I have tried what I can think of but it 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 is a fiddle , but for some reason I couldn't get the ng-click and ng-class to work on it, which changes the tab color.

Here are some images of what it looks like not on js fiddle: What I want and have: http://i.gyazo.com/3c7d6d80a9a490b31e795cacebbaa1a0.png http://i.gyazo.com/1bd597080bdba6ffa34fe18cf5462b74.png What I don't want but still also have: http://i.gyazo.com/d066effabd276d978e4775666a3b5d6c.png

If anyone has a solution I'd be extremely greatful! Thank you!

Answer 1

Get the distance of the div from top:

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

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

Then check if div has reached the top and add class :

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