How to avoid position jumping when hiding content?

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 e.g. with jQuery.

Answers 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/


Related Articles