指定の範囲までついてくるフローティングバナー

設置位置はストップさせたい場所に

まずはhtmlですが、

<div id="bnrStop">
<div id="bnr">
<a href="link/to/page.html">
<img src="/path/to/the/banner.jpg" alt="">
</a>
</div>
</div>

という感じにシンプルですが、
ここで肝心なのはバナーを設置するhtml上の位置を
最終的に止まってほしい場所にするということです。
理由は後でご説明します。

CSSはこんな感じに

さて続いてCSSの記述ですが、
ポイントはpositionの使い分けです。

#bnrStop {
width: 100vw;
height: 0;
position: static;
};
#bnrStop #bnr {
width: 100px;
height: 240px;
position: fixed;
right: 0px;
top: 300px;
}
/* バナー停止時 */
#bnrStop.stop {
position: relative;
}
#bnrStop.stop #bnr {
position: absolute;
top: auto;
bottom: 0px;
}

とこのような具合に、
「stop」というクラスを付け替えることで、
「#bnrStop」の位置で「#bnr」が固定されるよう記述します。

JSはこんな具合に

最後にjsの記述をこんなふうにすれば、
「#bnrStop」の位置まで来たバナーはピタッと停止してくれます。
※jQueryは先に読み込んでおいて下さいね。

var stop_at = $('#bnrStop'),
bnr = $('#bnr'),
bnr_img = bnr.find('img'),
wdw = $(window),
bnr_h = bnr.outerHeight(), // バナーの高さ
bnr_p = parseInt( bnr.css('top') ), //画面上端からバナー上端までの距離
bnr_b = bnr_h + bnr_p ; // バナーの下端の位置
bnr_img.load(function(e){
// 後から画像が読み込まれた場合は
// バナーの高さを再取得し、再計算する
bnr_h = bnr.outerHeight(),
bnr_b = bnr_h + bnr_p ;
});
function toggle(){
// stopクラス付け外しの処理
var st = wdw.scrollTop(),
border = stop_at.offset().top;
if( st + bnr_b >= border ){
// スクロール量とバナーの下端が停止位置に達した場合の処理
if(! stop_at.hasClass('stop') ){
stop_at.addClass('stop');
}
}else{
// 再びフローティングに戻す処理
if( stop_at.hasClass('stop') ){
stop_at.removeClass('stop');
}
}
};
wdw.on( 'scroll', toggle );

DEMO

こんな感じになります。
※バナーの画像を用意するのが手間だったのでCSSで代用してます。

See the Pen rwPYrz by Shinji Yamamoto (@commono_yamamoto) on CodePen.