MENU

Journal

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

Journal

CLOSE