スクロールした際に右下に広告用のバナーを表示させ、
クリックしたら消えて、それ以上は現れないようにする挙動。
jQueryを使って実装しました。その備忘録。
<!-- bnr -->
<div id="bnr">
<a href=""><img src="/assets/img/bnr.jpg" alt="広告用バナー"></a>
</div>
<!-- // bnr -->$(function () {
var bnr = $("#bnr");
var display = function () {
if ($(this).scrollTop() > 500) {
bnr.fadeIn();
} else {
bnr.fadeOut();
}
};
//スクロールしたらdisplayのイベント発生させる
$(window).on("scroll", display);
//click
bnr.click(function () {
bnr.fadeOut();
//displayのイベントもオフにする
$(window).off("scroll", display);
});
});
最近では広告のないページを見ることの方が難しい気もしますが、その広告自体の出方は多種多様な気がします。
ひとまずは一番よく見る基本的な挙動をjQueryで作りました。やはり私にはまだまだjQueryが必要です。
