Neuer Wert nach dem Anwenden von css() in jQuery

Question

Ich skaliere ein div, um ohne Scrollen sichtbar zu sein. So habe ich:

var sliderOffset = $('.field-slideshow-wrapper').offset().top, 
    windowHeight = $(window).height(), 
    sliderAllowed = (windowHeight - sliderOffset), 
    sliderImage = $('.field-slideshow-slide img').height(), 
    sliderOriginal = (sliderImage + 150), 
    scale = (sliderAllowed/sliderOriginal); 

$('.field-slideshow-wrapper').css({ transform: 'scale(' + scale + ')'}); 

Jetzt, div ist nicht auf der gleichen Position von oben nach wie vor und ich muss neu von oben versetzt bestimmen, nach css({ transform: 'scale(' + scale + ')' angewendet wird, so kann ich einen gewissen Spielraum berechnen zu bewegen DIV an die Spitze.

Wie neu offset().top des Elements zu bestimmen?

Answer 1

gut erhalten nur die neue Offset, nachdem Sie die Skalierung

...  
$('.field-slideshow-wrapper').css({ transform: 'scale(' + scale + ')'}); 
var newOffset = $('.field-slideshow-wrapper').offset().top; 

Answer 2

Es gibt zwei Möglichkeiten, dies und die Wahl tun könnte angewendet haben. Die transform: scale() verkleinert das Element in Richtung seiner Mitte, sodass sich die Oberseite des Elements nach unten bewegt. Das skalierte Element gibt immer noch die offset().top des nicht skalierten Elements zurück, so dass es nicht funktioniert.

Eine Option besteht darin, nur sicherzustellen, dass das neu skalierte Element am oberen Rand des alten Elements bleibt. Genau dies tun:

$('.field-slideshow-wrapper').css({ 
    transform: 'scale(' + scale + ') translateY(-50%)' 
}); 

Dies macht das Element um 50% seiner neuen Höhe nach oben, damit es an die Spitze seiner alten Dimensionen kleben.

Die andere Möglichkeit besteht darin, eine einfache Berechnung durchzuführen. Holen Sie sich die height des alten Elements, und ermitteln Sie dann die Anzahl der Pixel, die die scale() -Methode "nach unten" bewegt hat. Sie können die Anzahl von einigen Berechnungen (siehe unten) finden, und das ist die Zahl, die Sie zu dem alten hinzufügen können Offset() ganz oben auf den neuen bekommen.

var sliderOffset = $('.field-slideshow-wrapper').offset().top, 
      windowHeight = $(window).height(), 
      elHeight = $('.field-slideshow-wrapper').innerHeight(), 
      sliderAllowed = (windowHeight - sliderOffset), 
      sliderImage = $('.field-slideshow-slide img').height(), 
      sliderOriginal = (sliderImage + 150), 
      scale = (sliderAllowed/sliderOriginal); 
var addProportion = 1-scale/2; 

var newOffset = sliderOffset + (addProportion * elHeight); 

Ob Sie sollten verwenden innerheight() oder outerHeight() hängt von Ihrem Layout ab.