如何检测哪个 div 在更改时处于活动状态?
Posted
技术标签:
【中文标题】如何检测哪个 div 在更改时处于活动状态?【英文标题】:How to detect which div is active on change? 【发布时间】:2015-02-18 15:43:04 【问题描述】:我有以下 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
的总数,然后确定哪个具有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
值以匹配。
【问题讨论】:
【参考方案1】:使用$('.wrapper.active').index()
获取活动位置。然后你可以使用你的第 n 个孩子
【讨论】:
【参考方案2】:您可以采取几种方法。我通常将此功能称为“scrollspy”,据我回忆,它可以追溯到 MooTools 的 scrollspy。您正在使用 jQuery,因此您可以考虑使用 jQuery-scrollspy。如果您有机会使用它,Bootstrap 中还包含一个 scrollspy。
您也可以从头开始编写。我会通过跟上每个 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();
);
【讨论】:
我正在寻找一种从头开始的方法,而不是插件。我已经为wrapper
上的active
类设置了切换开关。所以真的我只需要找出哪个wrapper
有active
类。因此,如果第三个是active
,那么第三个寻呼机将获得activenav
类。我目前正在研究构建一个 jQuery 对象来帮助解决这个问题。
给我几分钟,我可以给你一份关于 CodePen 的草稿。
看看codepen.io/ryanburnette/pen/MYVppm 这不是最好的方法,但它是演示它的最快方法。它应该可以满足您的需求。它确实要求您有一列相关的 div。如果你想要旧的浏览器支持,你需要polyfill forEach。
非常感谢您在这个问题上所做的努力。这段代码 sn-p 应该作为一个很好的参考,但最终 farincz 提供的解决方案解决了我的问题。
我一定没有理解你的问题。我写一点 javascript 还是很开心的。以上是关于如何检测哪个 div 在更改时处于活动状态?的主要内容,如果未能解决你的问题,请参考以下文章