是否有替代位置的jQuery：粘性？

Question

假設我正在製作帶有兩個col-lg-6 div的bootstrap 4佈局。左邊的圖片包含一個圖片，右邊的圖片包含一串文字，足以讓頁面可以滾動。 由於引導程序4中的網格基於柔性顯示屬性，因此左div會自動垂直延伸至右邊的高度。 Bootstrap 4有一個新的「sticky-top」類，它使用position：sticky。 因此，如果向左側div內的圖像添加「sticky-top」類並且向下滾動頁面，則圖像會隨頁面一起滾動，直至到達頁面頂部，然後粘到頂部並保持粘性直到其父div的底部到達圖像的底部，然後圖像繼續與頁面一起滾動。 不幸的是，在所有現代瀏覽器中仍然沒有完全支持position：sticky，所以我想知道是否有跨瀏覽器兼容的jQuery替代方案？ 我試圖通過jquery添加一個額外的類到圖像，將位置更改爲固定在CSS中，並在圖像到達頁面頂部時添加到圖像中，然後嘗試在頁腳進入視口後將其刪除，但是這會使圖像從視口中消失，而不是隨着頁面一起滾動，因爲它會在附加類從其中移除後跳回到其父級頂部。

<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 long enough to make the page scrollable goes here</p> 
    </div> 
</div> 
<footer>Footer stuff goes here</footer> 

注意：圖像應該只粘在大的和特大的網格上，我寧願不必使用任何插件。

Answer 1

我寫得很快。將類.sticky添加到您想粘的東西，並添加您希望它粘住的父類.stickyTo。這不是完美的，但給出了一般的概念，也許你可以調整它爲你的項目。

var $sticky = $('.sticky'), 
 
    $stickyTo = $('.stickyTo'), 
 
    stickyToTop = $stickyTo.offset().top, 
 
    stickyToBottom = stickyToTop + $stickyTo.outerHeight(); 
 

 
$(window).on('scroll', function() { 
 
    var scroll = $(window).scrollTop(), 
 
    stickyTop = $sticky.offset().top, 
 
    stickyBottom = $sticky.offset().top + $sticky.outerHeight(); 
 
    
 
    if (stickyBottom >= stickyToBottom) { 
 
    if (scroll < stickyTop) { 
 
     $sticky.addClass('fixed').removeClass('abs'); 
 
    } else { 
 
     $sticky.addClass('abs'); 
 
    } 
 
    } else if (scroll > stickyToTop) { 
 
    $sticky.addClass('fixed'); 
 
    } else if (scroll < stickyToTop) { 
 
    $sticky.removeClass('abs').removeClass('fixed'); 
 
    } 
 
});

.row { 
 
    background: #ccc; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: auto; 
 
} 
 

 
.abs { 
 
    position: absolute; 
 
    bottom: 0; 
 
    top: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.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 stickyTo"> 
 
    <div class="col-12 col-lg-6"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="img-fluid sticky" alt="image"> 
 
    </div> 
 
    <div class="col-12 col-lg-6"> 
 
    <p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p> 
 
    </div> 
 
</div> 
 
<footer>Footer stuff goes here</footer>