javascript - 滚动过去时激活菜单类

Question

注意:使用 Bootstrap

当 anchor 距屏幕顶部 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/ (当您滚动右侧菜单中的事件类时发生变化)

Edit2:为向下滚动事件效果添加了我的代码...我对 js 很陌生，所以我可能以某种方式错误地实现了它。

Answer 1

编辑:了解实际问题:

$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
var anchors = $('body').find('h1');

for (var i = 0; i < anchors.length; i++){
    if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
        $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').addClass('active');
    } else {
        $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').removeClass('active');
    }
}
});

相同的技术；检查您的每个 h1 元素是否都在元素顶部位置下方和元素底部位置上方。如果为 true，则获取元素的 id 并选择相应的导航项并为其添加事件类。

更新 fiddle :http://jsfiddle.net/yrz54fqm/1/

旧答案

下面的代码应该会给你你正在寻找的结果

$(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');
        }
    }
});

您需要监听窗口上的滚动事件，并检查您的每个元素是否都在元素顶部位置下方和元素底部位置上方。

将第 3 行的 var anchors = $('body').find('.anchor'); 替换为您所处情况中的 anchor 类名称。这里还有一个 HTML 和 CSS 的 fiddle :http://jsfiddle.net/yrz54fqm/

希望对您有所帮助:)