【簡単実装】特定要素で追従バナーを非表示に！JavaScript＆CSS活用術

JavaScript

2022.06.072024.01.14

この記事では、JavaScript、CSS、HTMLを使って、特定の要素で追従バナーを非表示にする方法を紹介します。この方法を使えば、スクロールに応じて追従バナーが表示されたり非表示になったりする機能を簡単に実装できます。

コピペOKです！

このページは特定の要素で追従バナーを非表示にする機能を実装してます。

JavaScript
CSS
HTML
追従バナー非表示の実用例

JavaScript

$(function() {
  $(window).scroll(function () {
    var banner = $('#followup-bg');
    var off = $('#not_followup').offset();
    if ($(this).scrollTop() > off.top -600) {
        banner.fadeOut();
    } else {
        banner.fadeIn();
    }
  })
});

CSS

#followup-bg{
	width: 100%;
	bottom: 0;
	left:0;
	background-color:rgba(0,5,8,0.2);
	position: fixed;
}
#followup-main {
	width:100%;
	padding: 5px 0 10px 0;
	text-align: center;
	z-index: 2;
}

HTML

<div id="followup-bg">
  <div id="followup-main">
    <img src="バナーURL" alt="" width="バナー" />
  </div>
</div>

<div id="not_followup">
追従バナーを非表示にしたい要素
</div>

上記のコードは、追従バナーを特定の要素で非表示にするために使用するものです。各ファイルのコードをそのままコピペしてお使いいただけます。

まず、JavaScriptファイルでは、スクロールイベントを監視し、特定の要素（#not_followup）までスクロールした際に、追従バナー（#followup-bg）を非表示にしています。もちろん、その逆の場合（スクロールが戻った場合）は、再び表示されるようになっています。

次に、CSSファイルでは、追従バナーのデザインを設定しています。#followup-bgに対して、幅や位置、背景色などを設定し、#followup-mainに対して、テキストの配置やz-indexを設定しています。

最後に、HTMLファイルでは、追従バナーと非表示にしたい要素のマークアップを行っています。<div id="followup-bg">で追従バナーを作成し、<div id="not_followup">で追従バナーを非表示にしたい要素を指定しています。

これで、簡単に追従バナーを特定の要素で非表示にする機能が実装できます。これにより、ユーザーがコンテンツをスクロールしている間に追従バナーが邪魔にならないよう、適切なタイミングで非表示にすることができます。

この実装方法は、ブログやWebサイトのUI/UX向上に役立ちます。読者にとってストレスなく閲覧できるサイトを目指すために、ぜひこの方法を活用してみてください。

また、このコードは基本的な実装例ですので、必要に応じてカスタマイズしてお使いいただけます。例えば、バナーのデザインやアニメーション速度、非表示にする要素の範囲などを変更することで、より自分のサイトに合った追従バナーを実現できます。

このあたりでゆっくりバナーが消えます。

追従バナー非表示の実用例

プロモーションバナーの表示制御

Webサイトやブログにて、特定のキャンペーンやプロモーションをアピールするために追従バナーを使用することがあります。しかし、サイト内の特定のセクション（例えば、プライバシーポリシーや利用規約ページ）では、追従バナーを非表示にして、ユーザーに集中して読んでもらいたい場合があります。このようなケースで、追従バナーを特定の要素で非表示にする機能が役立ちます。