滚动经过时使菜单类处于活动状态

注意：使用引导

当锚点距离屏幕顶部50像素时，我想为菜单项分配"活动"类。这意味着我需要取消分配js中的活动类，并分配一个新类。

这是我的菜单

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="34">
    <div class="container">
        <div class="navbar-collapse collapse navbar-responsive-collapse" id="main-menu">
            <ul class="nav navbar-nav">
                <li id="whatbutton"><a href="#whatissm">What We Are</a></li>
                <li id="whybutton"><a href="#whyusesm">Why Us</a></li>
                <li id="offerbutton"><a href="#whatdoessmoffer">What We Offer</a></li>
                <li id="contactbutton"><a href="#contactus">Contact Us</a></li>
            </ul>
            <ul class="nav navbar-nav pull-right">
                <li><a href="#">Right Link</a></li>
            </ul>
        </div>
    </div>
</nav>

这些是我h1的

<h1 id="whatissm" name="whatissm"><span>sometexthere</span></h1>
<h1 id="whyusesm" name="whyusesm"><span>somtexthere</span></h1>
<h1 id="whatdoessmoffer" name="whatdoessmoffer"><span>sometexthere</span></h1>
<h1 id="contactus" name="contactus"><span>Contact Us</span></h1>

现在这是我开始挣扎的地方。。。

从早期的帖子中，我知道我的js应该看起来像这个

<script>
    //smooth scrolling
    $(function() {
        $('[data-toggle="popover"]').popover();
        $('[title]').tooltip({container: 'body'});
    });
    $('a').click(function() {
        var reduce = 150;
        $('html, body').animate({
            scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - reduce
        }, 500);
        return false;
    });
    //Making class active by scrolling past it
    $(window).scroll(function(){
        var scrollTop = $(document).scrollTop();
        var anchors = $('body').find('.anchor');
        for (var i = 0; i < anchors.length; i++){
            if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
                $(anchors[i]).addClass('active');
            } else {
                $(anchors[i]).removeClass('active');
            }
        }
    });
</script>

但不幸的是，这段代码对我来说不起作用。1）它没有取消分配活动类2）它就是不起作用了。

编辑：与此类似http://getbootstrap.com/css/（当您滚动右侧菜单中的活动类时发生变化）

第2版：添加了我的向下滚动活动效果代码。。。我对js还很陌生，所以我可能在某种程度上实现错了。