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

【问题标题】：how to stick image to top after scrolling, and scroll it out of view after page scrolls down to footer?如何在滚动后将图像粘贴到顶部，并在页面向下滚动到页脚后将其滚动到视图之外？
【发布时间】：2017-07-02 20:09:58
【问题描述】：

我需要创建一个 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>

【问题讨论】：

你能通过在codepen或jsfiddle或任何第三方服务上做一个demo来展示你的尝试吗，我们很容易理解这个问题..
我想在此页面上创建类似于他们在 apple.com 上的内容，例如：apple.com/shop/buy-mac/macbook-pro?product=MLH42LL/…

标签： jquery css twitter-bootstrap

【解决方案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();
});

一旦您在页脚的 10 像素范围内点击，图像将停止随页面滚动。当您向上滚动该功能时，然后将图像恢复到原来的位置。

【讨论】：