在jQuery中應用css（）后的新值

Question

我正在縮放div以便在不滾動的情況下可見。 所以我有：

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 + ')'});

現在div與之前的頂部不在同一位置，我需要在應用css({ transform: 'scale(' + scale + ')'之后確定從頂部開始的新偏移，所以我可以計算一些移動余量這個div在頂部。

如何確定新的offset().top元素的offset().top ？

Answer 1

有兩種方法可以做到這一點，你可以選擇。 transform: scale()將元素向中心縮小，因此元素的頂部向下移動。 縮放元素仍將返回非縮放元素的offset().top ，因此不起作用。

一種選擇是確保新縮放的元素將粘附到舊元素空間的頂部。 這樣做：

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

這使得元素向上移動了新高度的50％，從而將其固定在舊尺寸的頂部。

另一種選擇是做一些簡單的計算。 獲取舊元素的height ，然后獲取scale（）方法將其“向下”移動的像素數。 您可以通過一些計算找到該數字（見下文），這是您可以添加到舊偏移量（）的數字.top可以獲得新的數字：

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);

是否應該使用innerHeight（）或outerHeight（）取決於您的布局。

Answer 2

在應用縮放后，只需獲取新的偏移量

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