DIVがべとついていないか確認してください。

Question

Bootstrap 4クラスの "sticky-top"（位置はsticky）を使用しています。

DIVに「つまらない」のような余分なクラスを追加する方法はありますか？

私はこれを見つけたが、私は私のニーズに適合させることができませんでした：https://developers.google.com/web/updates/2017/09/sticky-headers

EDIT - 私は必要なものを明確にする：ANにスティッキー：

をクラス「スティッキー・トップは、」ポジションを追加素子。私の場合、DIVの位置が上に付いている場合、DIVに余分なクラスを追加したいと思います。例えば、要素に影を付けるには、その要素が上に止まる場合に限ります。だからこの場合のみクラスBが必要です

Answer 1

現在のところ、スクロールのdiv位置を計算する方法しかありません。

$('#wrapper').scroll(function() { 
 
\t var wrapperTop = $(this).offset().top; 
 
\t var headerTop = $('#header').offset().top; 
 
\t if (wrapperTop < headerTop) 
 
    \t $('#header').css('background','grey'); 
 
    else 
 
    \t $('#header').css('background','red'); 
 
});

#wrapper { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    overflow-y: scroll; 
 
} 
 

 
#header { 
 
    height: 50px; 
 
    background: grey; 
 
    top: -1px; 
 
    position: sticky; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div> 
 
    <div id="header">HEADER TEXT</div> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
</div>