如何在滚动后将图像放在顶部，并在页面向下滚动到页脚后将其滚动出视图？
如何在滚动后将图像放在顶部，并在页面向下滚动到页脚后将其滚动出视图？
提问于 2017-02-14 21:46:12
我需要创建一个bootstrap 4布局与一个图像，该图像后，页面滚动，图像到达页眉底部，但当页面向下滚动到页脚和页脚进入视区后，图像应该开始与页面再次滚动。图像应该只在大的和超大的bootstrap 4网格上是粘性的。我正在寻找的行为应该与新的bootstrap 4类" sticky-top“添加到图像中是一样的，只是使用css和jquery，因为由于缺乏浏览器支持，我不能使用sticky-top类。有没有办法用jquery做到这一点？
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<header>header sticks to top</header>
<div>breadcrumbs that scroll along with the page go here</div>
<div class="row">
<div class="col-12 col-lg-6">
<img src="image.jpg" class="img-fluid" alt="image">
</div>
<div class="col-12 col-lg-6">
<p>Bunch of random text goes here</p>
</div>
</div>
<footer>Footer stuff goes here</footer>
回答 1
Stack Overflow用户
发布于 2017-02-15 01:00:14
已经创建了一个很酷的库来检测这里当前使用的是哪个视口：https://stackoverflow.com/a/22885503/7053420
然后你可以这样做：
function checkOffset() {
if($('.img-fluid').offset().top + $('.img-fluid').height()
>= $('#footer').offset().top - 10)
$('.img-fluid').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('.img-fluid').css('position', 'fixed'); // restore when you scroll up
}但仅执行以下操作，具体取决于检测到的视口。
$(document).scroll(function() {
checkOffset();
});一旦你点击页脚10px以内，图像将停止滚动页面。当您向后滚动该函数，然后将图像恢复到它所在的位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42227802
复制相关文章
相似问题
腾讯云开发者
