Magnific Popup: springen von fix positioniertem Content

Wenn man Maginific-Popup zum Vergrößern von Bilder einsetzt, dann springen die fix positionierten Elemente beim Öffnen des Popups. Warum? Magnific Popup entfernt das Overflow Attribut des html-Elements und fügt stattdessen ein margin-right hinzu, das der Breite der Scrollbalken entspricht. Das schaltet das Scrolling der Seite aus. Ein Problem stellen die fix positionierten Elemente dar: sie springen leicht beim Öffnen des Popups. Wenn man bei fix positionierten Elementen diese entweder von rechts ausrichtet oder die Breite auf 100% setzt, dann ändert sich beim Öffnen des Popups die gesamte Breite der Seite, da die Scrollbalken entfernt werden. Die fix positionierten Elemente sind vom margin-right im html-Element wenig beeidruckt.

Lösung: Magnific Popup bietet viele Callbacks, die man nutzen kann, um die fixe Positionierung der Elemente zu korrigieren.

var magnificpopupSettings = {
        callbacks: {
            beforeOpen: function () {
                if($('nav.top-bar').css('position') == 'fixed') {
                    $('nav.top-bar').css('margin-right', '17px');
                    $('#top-link').css('margin-right', '17px');
                }
            },
            afterClose: function() {
                if($('nav.top-bar').css('position') == 'fixed') {
                    $('nav.top-bar').css('margin-right', '');
                    $('#top-link').css('margin-right', '');
                }
            }
        }
    };
};

Diskussion zum Thema: Jumping background