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类将切换到视口中显示的当前div。

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

以下是我尝试使用此功能的方法：

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

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

我知道这段代码需要一些爱，但我需要一些方向来解决它。如您所见，我将activenav类添加到列表中的第一项。我需要此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类之前得到正确的div数，以便我可以更新nth-child值以匹配。

Answer 1

使用$('.wrapper.active').index()获取有效的位置。然后你可以使用你的n-child

Answer 2

您可以采取几种方法。我通常将此功能称为“scrollspy”，据我记得，它可以追溯到MooTools的卷轴。您正在使用jQuery，因此您可以考虑使用jQuery-scrollspy。如果您有任何机会使用它，还有一个包含在Bootstrap中的卷轴。

您也可以从头开始编写。我是通过跟上每个div的顶部和底部偏移量，然后将其与窗口偏离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();
});

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

2 个答案: