强制幻灯片停留在其容器的顶部

Question

这有点难以解释,但我会试一试.我正在使用此滑块教程(http://css-tricks.com/slider-with-sliding-backgrounds/)来创建步骤表单.

它工作得很好,除了我有一个小问题,我有一个部分上传图片(大背景图片),我没有调整高度.

由于此上传部分位于第一张幻灯片的顶部,因此当我上传图片时,它会向下推动第二张和第三张幻灯片.有没有办法让其他幻灯片(2和3)保持在顶部而不管第一张幻灯片做了什么？

一个快速的图表,以帮助进一步解释我在做什么.

Ps:我遵循与教程中使用的语义相同的语义.例如.id,类等

Answer 1

您可以通过使用.data( )存储原始.offset () 来做到这一点，如下所示：

工作示例

$('#slide-1').data('offset-top', $('#slide-1').offset().top); //store the initial offset top 

$('#add').click(function () { // click the button to add an image
    $('div.image-holder').html('<img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /> '); 

    $('#slide-1, #slide-2').offset({ // keep slides 1 and 2 in their original positions
        top: $('#slide-1').data('offset-top')
    });
});