滚动菜单活动类-带有页边距的问题

Question

What I am trying to do:

When a user scrolls up and down my website (single page, multiple sections), the menu will highlight which section of the page the user is currently on.

What I have done:

I have got a menu working so that it will change the class to "active" when the linked section is currently scrolled to.

The issue:

Each section has a top margin of around 50 - 100px. The current javascript code doesn't handle this, and instead removes the class from all menu items altogether if the user is between two sections.

JS Fiddle: http://jsfiddle.net/d4yqA/3/

HTML:

<div id="headerWrapperFixed">
    <div id="headerFixed">
        <div id="fixedMenu">
            <ul>
                <li><a href="#home">Home</a>

                </li>
                <li><a href="#about-us">About Us</a>

                </li>
                <li><a href="#pricing">Pricing</a>

                </li>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="home">
     <h1>HOME</h1>

</div>
<div id="about-us">
     <h1>ABOUT US</h1>

</div>
<div id="pricing">
     <h1>PRICING</h1>

</div>

CSS:

#headerWrapperFixed {
    top:0;
    position:fixed;
    height:30px;
    width:100%;
    background-color:RGB(38, 38, 38);
}
#headerFixed {
    width:1100px;
    height:30px;
    background-color:RGB(200, 200, 200);
}
#fixedMenu {
    position:relative;
    width:700px;
    height:30px;
}
#fixedMenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:650px;
    height:30px;
}
#fixedMenu li {
    display: table-cell;
    width:120px;
    height:30px;
    text-align:center;
    vertical-align:middle;
}
li.active a, #fixedMenu li>a:hover, a.active {
    color:#FF0000 !important;
}
#home {
    height:800px;
    background-color:rgb(100, 100, 100);
    margin-top:100px;
}
#about-us {
    height:800px;
    background-color:rgb(200, 200, 200);
    margin-top:100px;
}
#pricing {
    margin-top:100px;
    height:800px;
}
h1 {
    margin:0;
    padding-top:50px;
}

Javascript:

$(window).scroll(function () {


    var scrollPos = $(document).scrollTop() + 40;
    $('#fixedMenu a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#fixedMenu ul li').removeClass("active");
            currLink.addClass("active");
        } else {
            currLink.removeClass("active");
        }
    });

});

Answer 1

If you want to simply keep the active class on the current section when scrolled into the margin, just add it to the right hand side of your equation

 if (refElement.position().top <= scrollPos + 120 && refElement.position().top + refElement.height() > scrollPos + 0) {

Or if you want to go to the next, subtract it from the right hand side

 if (refElement.position().top <= scrollPos -120&& refElement.position().top + refElement.height() > scrollPos) {