Question

我需要创建一个bootstrap 4布局，其中一个图像在页面滚动后粘到顶部，图像到达页眉的底部，但在页面向下滚动到页脚和页脚进入视口后，图像应该开始再次滚动页面。图像应仅在大型和超大型自举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>

Answer 1

已创建一个很酷的库来检测当前正在使用哪个视口：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内点击，图像将停止与页面一起滚动。当您向上滚动该功能时，请重新设置其中的图像。

如何在滚动后将图像粘贴到顶部，并在页面向下滚动到页脚后将其滚出视图？

1 个答案: