【jQuery】期限付き固定バナーの作り方

2026.02.20　Posted by Coding_team

Webプログラミング

こんにちは、クリエイターブログです。今回はjQueryで期限付き固定バナーの作り方を紹介したいと思います。

そう、ウィンドウの右下などありスクロールしてもくっついてくる良くあるやつです。

誰でも簡単にコピペで設置できるような形で作ってみましたので是非ご覧くださいませ。

はじめに
実装
おわりに

はじめに

大まかな仕様としては以下のようなものを想定して作成しました。

ページを1/4程スクロールしたらのウィンドウの右下に固定で表示
一度閉じるボタンを押したら1日経つまで再度表示されないようにする

では実際に実装して解説していきます。

実装

DEMOを作成しましたのでまずは以下から動作確認をしてみてください。

→DEMOはこちら

html

まずはバナー部分のhtmlですが、特に解説することは無いかと思います。

<div class="fixed_banner"><a href="todo"><img src="img/banner.jpg" alt="バナー"></a></div>

1	<div class="fixed_banner"><a href="todo"><img src="img/banner.jpg" alt="バナー"></a></div>

CSS

CSSではバナーの設置位置や閉じるボタンのデザインなどを設定します。

ポイントとしては予め display: none; でバナーを予め非表示にしておくことです。

.fixed_banner {
	display: none;
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 10;
}

.fixed_banner img {
	width: 150px;
	height: auto;
	border: 2px solid #999;
	transition: .2s;
}

.fixed_banner a:hover img {
	opacity: .7;
}

/* 閉じるボタン */

.fixed_banner .close {
	position: absolute;
	bottom: 100%;
	right: 0;
	background: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	color: #fff;
}

.fixed_banner {

display: none;

position: fixed;

bottom: 40px;

right: 40px;

z-index: 10;

}

.fixed_banner img {

width: 150px;

height: auto;

border: 2px solid #999;

transition: .2s;

}

.fixed_banner a:hover img {

opacity: .7;

}

/* 閉じるボタン */

.fixed_banner .close {

position: absolute;

bottom: 100%;

right: 0;

background: #999;

display: flex;

align-items: center;

justify-content: center;

width: 30px;

height: 30px;

font-size: 20px;

font-weight: bold;

cursor: pointer;

color: #fff;

}

JavaScript

JavaScript部分ですが、今回は使用するプラグインは以下の2つになります。

DEMOではCDNから読み込んでますが、配布元のURLも記載しましたので必要な方はそちらからダウンロードください。

jQuery4.0.0
配布元：Download jQuery | jQuery
js-cookie3.0.5
配布元：GitHub – js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

jQueryは最新版を、あとはJavaScriptでCookieを簡単に使用する為にjs-cookieプラグインを使用します。

Cookieを簡単に扱うためのプラグインは色々ありますが、他のは結構古いものが多いので比較的新しいjs-cookieを用いました。

実際の記述は以下になります。各構文の解説なども記載しましたのでご参考ください。

<script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
<script>
$(function(){
	//固定バナー
	var fixed_html = $('.fixed_banner'); //バナーのhtmlを指定

	//固定バナー 閉じるボタン
	fixed_html.append('<div class="close">×</div>'); //閉じるボタンのhtmlを設定
	$('.close', fixed_html).on('click',function(){ //閉じるボタンを押したときの処理
		fixed_html.remove(); //DOMから削除
	});

	//固定バナー用関数
	function fixed_banner() {
		var cookiename = Cookies.get("first"); //読み込むCookieを指定
		if(!(cookiename == "after")){ //Cookieに特定の値がなかったら
			fixed_html.fadeIn('fast'); //バナーをフェードイン
			Cookies.set('first', 'after', { expires: 1, path:'/' }); //Cookieを保存期間1日（expires）で設定
		}
	}

	//固定バナー 表示位置
	var display = $(document).height() / 4; //ウィンドウの1/4の高さ
	$(window).on('scroll',function(){ //ページをスクロールしたときの処理
		if($(window).scrollTop() > display){ //先ほど設定した高さよりスクロールしたときの処理（ウィンドウの1/4）
			fixed_banner(); //固定バナー用関数を実行
		}
	});
});
</script>