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

2017.07.13

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

何かとつかう機会の多いフローティングバナーですが、
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.


Relative Post

Latest Journal

philosophy | 哲学

philosophy | 哲学

commono
2016.12.19
Vision | 展望

Vision | 展望

commono
2016.12.09
webデザインフロー(1)インサイド→アウト ー理論編ー

webデザインフロー(1)インサイド→アウト ー理論編ー

Shun Uchimura
2017.05.13
オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

Shun Uchimura
2017.05.13
オウンドメディア(2)押さずに、引き込む。

オウンドメディア(2)押さずに、引き込む。

Shun Uchimura
2017.05.13
オウンドメディア(1)受け手主観でオウンドメディアをつくる

オウンドメディア(1)受け手主観でオウンドメディアをつくる

Shun Uchimura
2017.05.13
デザイナーとしてマーケティングを考える(4)4Pのキモを知る

デザイナーとしてマーケティングを考える(4)4Pのキモを知る

Shun Uchimura
2017.05.12
デザイナーとしてマーケティングを考える(3)4Pは古いのか

デザイナーとしてマーケティングを考える(3)4Pは古いのか

Shun Uchimura
2017.05.12
ajaxっぽいスムーズな画面遷移の方法(3/3)

ajaxっぽいスムーズな画面遷移の方法(3/3)

Shinji Yamamoto
2017.12.28
ajaxっぽいスムーズな画面遷移の方法(2/3)

ajaxっぽいスムーズな画面遷移の方法(2/3)

Shinji Yamamoto
2017.11.24
ajaxっぽいスムーズな画面遷移の方法(1/3)

ajaxっぽいスムーズな画面遷移の方法(1/3)

Shinji Yamamoto
2017.11.22
スムーススクロールがうまく動かない場合の解決方法

スムーススクロールがうまく動かない場合の解決方法

Shinji Yamamoto
2017.11.22
Javascript APIでのストリートビュー実装方法

Javascript APIでのストリートビュー実装方法

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

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

Shinji Yamamoto
2017.07.13

View ALL

Contact