指定の範囲までついてくるフローティングバナー
何かとつかう機会の多いフローティングバナーですが、
CSSのposition: fixedのみでは、
フッター等の被ってほしくないところまでついてきてしまい、
邪魔になってしまうことも多いです。
そんなとき役立つ「フッター手前」等指定の範囲までついてくる、
フローティングバナーの実装についてメモ
設置位置はストップさせたい場所に
まずは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.
