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