如何在滾動後將圖像粘貼到頂部，並在頁面滾動到頁腳後將其滾動到視圖外？

我需要創建一個引導程序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

如何在滾動後將圖像粘貼到頂部，並在頁面滾動到頁腳後將其滾動到視圖外？

回答

相關問題