基本的に、2 つの div を保持するこの div コンテナーがあります。下にスクロールしてdivコンテナがウィンドウを通過すると、画面の上部にくっついて画面に従いますが、下にスクロールし続けると、コンテナのdiv内のdivがフッターに重なります。
フッターが重ならないようにする方法がわかりません。divコンテナーの下部がフッターのすぐ手前に達すると移動が停止しますが、上にスクロールすると画面に追従します。現在のところ、通過すると画面を下にたどり、元の位置に戻るだけです。
以下は、次の部分の JS です。
function sticky_relocate_2() {
var window_top = $(window).scrollTop();
var div_top = $('.sticky-anchor').offset().top + 210;
if (window_top > div_top) {
$('#right_side_inner_container').addClass('sticky_2')
} else
$('#right_side_inner_container').removeClass('sticky_2')
}
google.setOnLoadCallback(function()
{
$(window).scroll(sticky_relocate_2);
sticky_relocate();
});
div id=right_side_inner_container 移動したいコンテナのIDで、フッターに到達したら停止します。div id=フッターのフッター ID。
他のいくつかのサイトで、特定のポイントに達すると「トップ」css から差し引かれるため、スクロールされたすべてのピクセルがそこから差し引かれ続けることがわかりました。私はそれを行う方法を理解できないようです。
任意の助けをいただければ幸いです。
編集：例
右側の div を見ると、過去にスクロールすると画面に固執しますが、しばらくしてから下にスクロールし続けると、停止して続行しません。これが私が苦労していることです。
インスペクト要素（クロム）を使用すると、トップCSSが差し引かれ続けます。
編集 2: 追加されたスタイル:
#right_side_inner_container {
width 300px;
height: 600px;
background: transparent;
text-align: center;
color: black;
}
#right_side_inner_container.sticky_2 {
width: 300px;
height: 600px;
background: transparent;
position: fixed;
top: 0;
margin-top: -8px;
}
#footer {
width: 100%;
height: 200px;
margin: 5px 0 0 0;
clear: both;
background: blue;
}
フッターdivに到達する直前に、右の内部コンテナdivを停止させたい。元の div がスクロールされたときにスティッキー クラスが追加され、スクロールされたときに画面をたどることができます。