スクロールに追従して画面下に表示されるアフィリエイト用ボタン・バナー

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

まずは基本型から。アフィリエイトなどで特定の商品を紹介したい時に使える、画面下で追従するボタンです。
※サンプル用に0.8倍に縮小

こちらもチェック

おしゃれなバナーを使いたいならこちら
画面に追従するバナー広告（アンカー広告風）

CSSの解説

コードを見る

余計な装飾を省いています。

HTML

<input type="checkbox" id="close"><!--チェックボックス-->  
<div class="float-btn"> <!--追従ボタン-->
  <p>ここに煽り(マイクロコピー)</p>
  <a href="#">ここにボタン</a>
  <label for="close" class="fb-close">×</label> <!-- 閉じるボタン -->
</div>

CSS

/*** チェックボックスは隠す ***/
#close{
  display: none; /*非表示*/
}

/*** 追従パーツの全体 ***/
.float-btn{
  position: fixed; /*画面固定*/
  bottom: 0; /*下*/
  left: 0;
  width: 100%; /*フルワイド*/
  background: rgba(0,0,0,50%); /*半透明の黒*/
  padding: 16px 0;
  display: flex; /*中身をフレックス表示*/
  justify-content: center; /*中央寄せ*/
  align-items: center; /*縦軸中央寄せ*/
}

/*** マイクロコピー ***/
.float-btn > p{
  color: #fff;
  margin: 0 1rem;
}
/* スマホ向け */
@media screen and (max-width: 520px){
  .float-btn p{
    display: none; /*非表示*/
  }
}

/*** ボタン部分 ***/
.float-btn > a{
  display: inline-block;
  vertical-align: middle; /*上下中央寄せ*/
  line-height: 1.5;
  padding: 5px 30px;
  border-radius: 4px;
  background: #F37167;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 0 #96150C; /*影*/
  transition: .3s;
}
/*ボタンホバー時*/
.float-btn a:hover{
  transform: translateY(2px); /*押下*/
  box-shadow: none; /*影削除*/
}

/*** 閉じるボタン ***/
.fb-close{
  position: absolute;
  top: 0;
  right: 20px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/*** ×をクリック(チェックボックスに✔) ***/
#close:checked ~ .float-btn{
  display: none; /*追従パーツ削除*/
}

ボタンとマイクロコピーを内包したdiv要素を、position: fixed で画面固定して表示します。

追従パーツ全体 .float-btn を固定表示
- position: fixedで位置を画面固定
- bottom: 0 left: 0 で画面下端に表示
- width: 100%で画面幅に合わせる
- backgroundで背景色を指定（半透明にする）
.float-btnをフレックス表示にして子要素（パーツの中身）を1行に並べる
- display: flexで横並びに
- justify-content: centerで水平中央寄せ
- align-items: centerで縦軸中央寄せ
マイクロコピーの表示 .float-btn > p
- 文字色を白にcolor: #fff
- スマホ閲覧時@media screen and (max-width: 520px)は非表示
ボタンの作成 .float-btn > a
- 任意のデザインで作成
閉じるためのボタンをチェックボックスで作成
- .float-btn 外にチェックボックス (input属性) を作成、idを指定しておく
- チェックボックスと同じ id で閉じるボタン(label属性) を作成
- labelクリックで✔が入ったら(#close:checked ~ .float-btn)、.display: noneで非表示に

応用CSS

上スクロール時だけ表示する

下スクロール時には画面外へ引っ込む追従ボタン。
jQueryを使用してスクロールを検知して、下スクロール時のみ .hidden クラスを付与。.hidden が付与されている間は、transform: translateY(100%)で要素分だけ下に移動させています。

なお、×ボタンをクリックで閉じる仕様は同じです。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

追記部分のコードを見る

追記部分です。

HTML

  <!-- jQueryの読み込み -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
  <script src="js/offsettop.js"></script>

CSS

/*** 下スクロール時 ***/
.float-btn.hidden{
  transform: translateY(100%); /*下に移動*/
}

JS (jQuery)

var start_pos = 0;
$(window).scroll(function(e){
  var here = $(this).scrollTop();
  if (here > start_pos) { //下スクロール
    $(".float-btn").addClass("hidden");  //hidden付与
  } else { //上スクロール
    $(".float-btn").removeClass("hidden"); //hidden除外
  }
  start_pos = here;
});

時間差で表示する

一定時間経過後に表示される追従ボタンです。
最初から表示されていると鬱陶しいですが、しばらく記事を閲覧した後ならまだ許されると思います。

また、先ほどの「上スクロール時のみ表示するjQuery」と組み合わせるのもおすすめです。

See the Pen 時間差で表示される追従アフィリエイトボタン by チータツ (@cheese_fuji) on CodePen.