How to avoid position jumping when hiding content?

I have been working on the site, 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 e.g. with jQuery.

Answers 1

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

         var sctop = $(window).scrollTop();
         var maptop = $('.map').offset().top;
         dif = maptop - sctop;
         if(dif <= 0) 

    With animation:

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

    Here is the Demo:

    Another Demo:

Related Articles