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

我需要创建一个引导程序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"> 
 
\t <div class="col-12 col-lg-6"> 
 
     <img src="image.jpg" class="img-fluid" alt="image"> 
 
     </div> 
 
     <div class="col-12 col-lg-6"> 
 
     \t <p>Bunch of random text goes here</p> 
 
     </div> 
 
\t </div> 
 
    <footer>Footer stuff goes here</footer>

来源

2017-02-14 Goran Tesic

你可以通过在codepen或jsfiddle或任何第三方服务上进行演示来展示你所尝试的吗，我们很容易理解这个问题。 – Niraj

我想创建类似于apple.com上的内容在此页面上，例如：http://www.apple.com/shop/buy-mac/macbook-pro?product=MLH42LL/A&step=config# –

酷库已经建立，以检测其视目前正在这里使用：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像素内击中，图像将停止滚动页面。当您向后滚动该功能时，将图像重新置于其位置。

来源

2017-02-14 17:00:14

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

回答

相关问题