如何检测哪个 div 在更改时处于活动状态？

Question

我有以下 DOM 结构：

<div class=”wrapper active”>
    <p>content</p>
</div>

<div class=”wrapper”>
    <p>content</p>
</div>

<div class=”wrapper”>
    <p>content</p>
</div>

<div class=”wrapper”>
    <p>content</p>
</div>

<div class=”wrapper”>
    <p>content</p>
</div>

每个 wrapper div 都有全屏的高度和宽度。当用户从一个全屏 wrapper 滚动到下一个全屏时，active class 将切换到视口中显示的当前 div。

这些 wrapper div 是从 CMS 动态生成的。我需要能够计算出 wrapper div 的总数，然后确定哪个具有 active class。这将允许我使用 jQuery 来更新寻呼机以对应于 active child。

以下是我尝试进行的尝试：

$('body').each(
    function() {
        var numberOfDivs = $('.full-screen-wrapper', $(this)).length);
    }
);

$(".pager span:nth-child(1)").addClass("activenav");

我知道这段代码需要一些爱，但我需要一些关于如何解决它的指导。如您所见，我将 activenav class 添加到列表中的第一项。我需要这个 nth-child 值等于当前 wrapper active div.

只是为了帮助消除任何混淆。这是 pager:

的结构

<ul class="pager">
    <span class="activenav">•</span>
    <span class="">•</span>
    <span class="">•</span>
    <span class="">•</span>
    <span class="">•</span>
</ul>

本质上，我只需要正确计算 active class 之前有多少 div，这样我就可以将 nth-child 值更新为匹配。

Answer 1

您可以采用几种方法。我通常将此功能称为 "scrollspy"，据我所知，它可以追溯到 MooTools 的 scrollspy。您正在使用 jQuery，因此您可以考虑使用 jQuery-scrollspy。 Bootstrap 中还包含一个 scrollspy，如果您有机会使用的话。

您也可以从头开始编写。我会通过跟上每个 div 的顶部和底部偏移量来做到这一点，然后将其与 window 从 Y 的偏移量进行比较。如果你在高点和低点之间特定 div 的值则该值处于活动状态。我已经证明了该策略 on CodePen.

function getDivPositions() {
  var positions = []
    ;

  $("body > div").each(function () {
    positions.push({
      el: $(this)
    , top: $(this).offset().top
    , bottom: $(this).offset().top + $(this).height()
    });
  });
  return positions;
}

function setActive() {
  var currentPosition
    , divPositions
    ;

  currentPosition = window.pageYOffset;
  divPositions = getDivPositions();

  divPositions.forEach(function (d) {
    if ( currentPosition >= d.top && currentPosition <= d.bottom ) {
      d.el.addClass("active");
    }
    else {
      d.el.removeClass("active");
    }
  });
}

$(window).on("scroll", function () {
  setActive();
});

Answer 2

使用$('.wrapper.active').index()获取活动位置。然后你可以使用你的 nth-child

如何检测哪个 div 在更改时处于活动状态？

How to detect which div is active on change?

jquery

pager