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

Question

I have a situation where I need to delete the top-most divs in a document without causing any changes from the user's perspective. Basically, I need to go from:

---------top of document
div1
div2
div3
---------top of window
div4
div5
---------bottom of window
div6
div7
---------bottom of document

to:

---------top of document
div3
---------top of window
div4
div5
---------bottom of window
div6
div7
---------bottom of document

What would be the best way to accomplish this transition in a manner that doesn't cause the user to see div4 and div5 make any movement?

Answer 1

You should be able to set the document's scrollTop to the current one minus the height of the div s you are removing. Something like:

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

The change in scroll position should be fast enough that the user won't notice it.

Answer 2

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');
        }
    });  
});

Here, this should work!

This code is basically checking for scroll event, and when it reaches past the first two divs (so we add their heights), we remove them. I didn't even noticed anything changes when I tested them.

check it out live on jsfiddle

Answer 3

If you don't need to actually remove the element from the DOM, you can set its style.visibility property to "hidden". It will disappear from the page, but there will still be an empty space where it used to be.