Question

注意：使用Bootstrap

我想分配一个菜单项“活跃”＆＃39;当锚距离屏幕顶部50px时上课。这意味着我需要在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＆＃39>

<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");

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

2 个答案: