demo

Question

我喜欢以下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

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

Answer 1

问题在于当DIV被隐藏时它会发出一个窗口大小调整，它也会发出一个scrool ...因为下一行div将被放置在它应被移除的点之上，然后它被删除。 / p>

检查此示例，我调整了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的代码之前，执行以下步骤：

在每个函数中定位nex div

demo

1 个答案: