Question

我有以下问题：

我想实现一些逻辑，以便在滚动时在导航栏中的列表元素上设置活动类。我用过这个片段：

$(window).bind('scroll', function () {
  var scrollPos = $(window).scrollTop() + 100;
  $('#nav-menu a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    currLink = currLink.parent();
    if (refElement.position().top <= scrollPos) { //&& refElement.position().top + refElement.height() > scrollPos
      $('.nav > li').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
});

当我滚动时它工作正常，因此当我点击导航栏内的链接时也是如此。假设我有5个链接，指的是5个不同的div。让我们说我目前处于第一个div的位置。
现在我点击最后一个链接，然后滚动显示div。但是现在，当我滚动时，中间的每个链接都会获得活动类。

你能建议一个解决方法来跳过它们之间的链接吗？

编辑：这是点击滚动代码部分：

// Page scroll
$('a.page-scroll').click(function () {
  $(".nav > li").removeClass("active");
  // $(this).parent().addClass("active");
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
      location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - 40
      }, 900);
      return false;
    }
  }
});

Answer 1

根据我对上述问题的评论修改了您的代码。如果这是有效的，请告诉我。我评论了我的修改，因此你可以--CapitalQ CMD / CTRL + F。

$(window).bind('scroll', function () {
    var scrollPos = $(window).scrollTop() + 100;
    $('#nav-menu a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        currLink = currLink.parent();
        if (refElement.position().top <= scrollPos) {
            $('.nav > li').removeClass("active");

            // added a check here to only add "active" if body not scrolling --CapitalQ
            if (!$('body').hasClass('scrolling')) {
                currLink.addClass("active");
            }
        }
        else {
            currLink.removeClass("active");
        }
    });
});

$('a.page-scroll').click(function () {

    // Add scrolling class to body --CapitalQ
    $('body').addClass('scrolling');

    $(".nav > li").removeClass("active");
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top - 40
            }, 900, function () {

                // added callback to jQ animate function --CapitalQ
                $('body').removeClass('scrolling');
                $(this).parent().addClass('active');
            });

            return false;
        }
    }
});

滚动时跳过某些元素的活动类

1 个答案: