How to avoid position jumping when hiding content?

Question

I have been working on the site https://hotel4meetings.firebaseapp.com/ , where clicking on small map expands a larger map below.

However, when you scroll below that large map and click on the button at the bottom to close the map, the content jumps to another position.

I wonder if it possible to minimise jumping of the content below the closing button?

My reasoning: The user is looking at the content below the closing button, so it is preferable not to move that content.

The site is Angular-based but the problem is not specific to Angular. The same functionality can be achieved eg with jQuery.

Answer 1

assuming that .map is your big map container and .close is the button that closes the map:

$('.close').click(function(){
     var sctop = $(window).scrollTop();
     var maptop = $('.map').offset().top;
     dif = maptop - sctop;
     if(dif <= 0) 
          $(window).scrollTop($(window).scrollTop()+dif-100);
    $('.map').hide();
});

With animation:

$('.close').click(function(){
    $('.map').slideUp(300);
    var sctop = $(window).scrollTop() - $('.map').height();
 $('html, body').animate({scrollTop : sctop}, 300);

});

Here is the Demo: https://jsfiddle.net/ym0ek6oq/1/

Another Demo: https://jsfiddle.net/ym0ek6oq/2/

Answer 2

It isn't that the content is jumping it's that when you hide the element the space it takes up closes.

You can try using

$("#someID").css("visibility", "hidden");

with

#someID {
    display: block; 
}

That should do what you are asking but it will leave a blank space within the page.

Maybe you could scroll the page back down when you close the map the same distance it takes up when visible to cancel the apparent jump of content. Not sure it'll give the desired effect though.

Hope this helps, Tim