迫使幻灯片停留在容器的顶部
迫使幻灯片停留在容器的顶部
提问于 2013-08-10 16:04:50
这有点难解释，但我试试看。我正在使用这个滑块教程(http://css-tricks.com/slider-with-sliding-backgrounds/)来创建一个步骤表单。
它运行的很好，但我有一个小问题，我有一个部分上传图片(大背景图片)，我没有调整高度。
因为这个上传部分位于第一张幻灯片的顶部，所以当我上传一张图片时，它会将第二张和第三张幻灯片向下推。有没有办法让其他幻灯片(2和3)保持在顶部，而不管对第一张幻灯片做了什么？
一个快速的图表，以帮助进一步解释我正在做的事情。
Ps: --我遵循的语义与教程中使用的语义相同。例如..。身份证、班级等。
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-08-19 16:55:24
您可以使用如下所示的.offset()来存储原始.data()：
工作实例
$('#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')
});
});Stack Overflow用户
发布于 2013-08-18 06:54:14
对html进行以下更改，使其工作演示
<nav class="slider-nav">
<a href="#slide-0" class="active">Slide 0</a>
<a href="#slide-1">Slide 1</a>
<a href="#slide-2">Slide 2</a>
</nav>
<div class="slider-wrap">
<div class="image-holder">
<img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg"/>
</div>
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-0">
</div>
<div class="slide" id="slide-1">
</div>
<div class="slide" id="slide-2">
</div>
</div>
</div>
</div>Stack Overflow用户
发布于 2013-08-19 01:54:22
您应该使用<div class="slide" />作为第一张幻灯片中您想要的所有内容的包装器。这样，第一张幻灯片中的文件上传器不会影响其他两张幻灯片。
这是一个固定JSFiddle！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18163729
复制相关文章
相似问题
腾讯云开发者
