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

Question

注意：使用引导程序

当锚点距离屏幕顶部 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 并选择相应的导航项并向其添加活动类。

更新小提琴：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'); 替换为您所遇到的任何锚类名称。这里也是 HTML 和 CSS 的一个小技巧：http://jsfiddle.net/yrz54fqm/

希望对你有帮助:)

Answer 2

 /**
 * 
 * @param {Element} - element 1 that used to get offset when scrolling
 * @param {Element} - activated when passing element 1 
 * @param {String} - class name to add to element 2 when element 1 is passed
 */
this.ScrollBetween = function(targetElement, pElement, className) {
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop(),
    targetOffsetTop = $(targetElement).offset().top,
    targetHeight = $(targetElement).height();

    (scrollTop > targetOffsetTop - 50 && scrollTop < targetOffsetTop + targetHeight - 50 ? $(pElement).addClass(className) : $(pElement).removeClass(className));
  });
};

制作了一个函数，使其更易于理解。现在它在 JQuery 对象中使用，但可以通过将其更改为

来简单地更改为常规函数

function ScrollBetween(targetElement, pElement, className){ ............. }

可以被调用

ScrollBetween($("#section-1"), $("li-1"), "active");