ポジションにjQueryの代替手段がありますか？

Question

2つのcol-lg-6 divでブートストラップ4のレイアウトを作っています。左のイメージにはイメージが含まれ、右のイメージにはページをスクロール可能にするのに十分な長さのテキストが含まれています。 ブートストラップ4のグリッドはフレックス表示プロパティに基づいているため、左divは自動的に右の高さに垂直に伸びます。 ブートストラップ4にはposition：stickyを使用する新しい "sticky-top"クラスがあります。 左のdiv内の画像に「sticky-top」クラスが追加され、ページが下にスクロールされると、画像はページの上端に達するまでそのページと共にスクロールし、次に上にスティックされて粘着性があります親divの下端が画像の下端に達するまで、画像はページと共にスクロールし続けます。 残念ながら、position：stickyはまだ現代のすべてのブラウザで完全にサポートされていないので、ブラウザに互換性のあるjQueryの代替機能があるかどうか疑問に思っていましたか？ jqueryを使って余分なクラスを追加しようとしましたが、位置がcssに固定され、画像がページの一番上に来ると画像に追加されてから、フッタがビューポートに来た後に削除しようとしましたページと共にスクロールするのではなく、ビューポートから画像が消えます。追加のクラスが親divから削除された後、親divの先頭に戻ってくるためです。

<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>