jQueryでスクロールすると画像を表示させよう

梅雨ですっきりしない日が続いていたかと思えば、ここ数日一気に気温が上がり、全国でも多くの方が熱中症で搬送されたニュースを目にします。体調管理にはよりいっそう気をつけたい、そんなサポート部の本田です。

さて、ECサイトなどを見ていて下にスクロールするとクーポンが出てきた！画像が出てきた！よくありませんでしょうか。

本日は、そちらの実装方法をご案内します。

初めての方は少しとっつきにくい印象があるかもしれないjQueryですが、今回のスクロール時に画像を表示させる方法は、簡単に実装できます。

動きはこちらのデモサイトで確認できます。（実際にスクロールをしてしてみると、画像が表示されます）

以下、実装のためのステップとコードをご紹介します。

ステップ1：HTMLの実装

まずはHTMLです。*のところに任意の画像URLをいれます

<a href="url">

を利用して画像リンクにしてもよいですね。

<div class="scrolltest">
<img src="*">
</div>

ステップ２：CSSの実装

次にCSSです。
rightやtopの数値を変更することで表示させる位置を編集することができます。
widthの値を編集することで表示させる画像サイズを変更できます。

/*スクロール前は非表示にする設定*/
.scrolltest{
display:none;}

/*スクロールした際に表示される画像の設定*/
.scrolltest.test.fixed {
    position: fixed;←スクロールしても表示させる位置を固定させます
    right: 0%;←右端で出すために記述します、左端で表示させるにはleft:0%;と記述します
    top: 0px;サイト上部で表示させるために記述します
    width: 50%;←表示させる画像のサイズ指定です
    display: block;←画像を表示させるために記述します
}

ステップ３：jQueryの実装

最後にjQueryです。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
  $(window).on('scroll', function() {
    /*下に10pxスクロールすると*/
	if ($(this).scrollTop() > 10) {
      /*.testにfixedというクラスを付与する*/
	  $('.test').addClass('fixed');
    } else {
      /*戻るとfixedというクラスを外す*/
	  $('.test').removeClass('fixed');
    }
  });
});
</script>

終わりに

いかがでしょうかたったこれだけで実装することができます。
訴求していきたい情報やお知らせなどをサイトのユーザーに対して
目立たせて伝えることができそうですね！

もうすぐ夏のセールなどが行われると思いますが
セールページへの誘導に使ってみてはいかかでしょうか。

本田