如何删除顶部div而不会导致底部div跳起来?

我有一种情况,我需要删除文档中最顶层的div而不会从用户的角度进行任何更改 . 基本上,我需要从:

---------文件顶部
DIV1
DIV2
DIV3
---------窗口顶部
DIV4
DIV5
---------窗口底部
DIV6
DIV7
---------文件底部

至:

---------文件顶部
DIV3
---------窗口顶部
DIV4
DIV5
---------窗口底部
DIV6
DIV7
---------文件底部

以不会导致用户看到div4和div5进行任何移动的方式完成此转换的最佳方法是什么?

回答(3)

3 years ago

Heavily edited!

$( document ).ready(function() {
    var heightof = $('#one').height() + $('#two').height();
    $(window).scroll(function(){
        var y = $(this).scrollTop();

        if(y >= heightof)
        {
            $('#one, #two').remove();
            $(this).scrollTop('0px');
        }
    });  
});

在这里,这应该工作!

这段代码基本上是检查滚动事件,当它到达前两个div时(所以我们加上它们的高度),我们删除它们 . 当我测试它时,我甚至没有注意到任何变化 .

jsfiddle实时查看

3 years ago

您应该能够将文档的 scrollTop 设置为当前值减去要删除的 div 的高度 . 就像是:

var height = $('#div-1').height() + $('#div-2').height();
$(document).scrollTop($(document).scrollTop() - height);
$('#div-1, #div-2').remove();

滚动位置的变化应足够快,用户不会注意到它 .

3 years ago

如果您不需要从DOM中实际删除该元素,则可以将其 style.visibility 属性设置为"hidden" . 它将从页面中消失,但仍然会有一个空白的空间 .