在每个函数中定位 nex div

Posted 2023-02-25

【中文标题】在每个函数中定位 nex div

【英文标题】：targeting nex div within each function

【发布时间】：2014-01-09 07:18:47

【问题描述】：

我喜欢下面的 html：

<div id="mainbar">
    <div class="swrap sliderwrap-1"></div>
    <div class="swrap sliderwrap-2"></div>
    <div class="swrap sliderwrap-3"></div>
    <div class="swrap sliderwrap-4"></div>
</div>

当红色 div 底部偏移量即将变为黑色固定 div 时，我想 隐藏（仅在此处说明），因此我将目标定为当前的下一个 div 偏移量，这样它的底部偏移量就会得到并且当滚动到这个偏移值时，应该隐藏红色 div 框，如果滚动到绿色 div 的底部偏移量，则应该隐藏绿色 div 框。我已经尝试了很多但太困惑了我该怎么办？

jQuery:

$(window).on('scroll',function()
    $('.swrap').each(function()
        var s = $(window).scrollTop();
        var t = $(this).next().offset().top ;
        if(s>t) $(this).hide();
    );
);

demo

但它没有按我的意愿工作。

【参考方案1】：

问题在于，当隐藏 DIV 时，它会发出一个窗口调整大小，这也会发出一个 scrool... 因为行中的下一个 div 将被放置在应该删除它的点之上，所以它被删除了。

查看这个示例，我调整了 DIV 的大小，以便在删除第一个 DIV 时，下一个仍然足够大以保持在非删除区域下方：

Fiddle

.sliderwrap-1
    height: 20%;
    background: #f00;

.sliderwrap-2
    height: 40%;
    background: #0f0;

.sliderwrap-3
    height: 60%;
    background: #ff0;

.sliderwrap-4
    height: 120%;
    background: #f0f;

除此之外，我还认为您错误地计算了应该隐藏 DIV 的点。它仅在下一个 DIV 的顶部离开屏幕时发生，而不是在下一个 DIV 的顶部进入黑色区域下方时发生。

可以做什么？在这里展示它太多了，但我建议在输入代码以隐藏 DIV 之前，请执行以下步骤：

unbind the "on scrool" event 隐藏要隐藏的 DIV reposition the top of the next DIV at the exact same place it was placed before hiding the previous DIV re-bind the "on scrool" event