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

フッターまでスクロールすると追従バナーが非表示になるJavaScript JavaScript

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

コピペOKです!

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

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

コンテンツとの干渉を防ぐ

記事や商品紹介ページで、大きな画像や動画などのビジュアル要素が含まれている場合、追従バナーが重要なコンテンツと干渉することがあります。追従バナーを特定の要素で非表示にする機能を利用することで、ユーザーが重要なコンテンツを見逃さないよう、適切なタイミングでバナーを非表示にできます。

ヘッダーメニューとの競合を回避

ページ上部に固定されたヘッダーメニューがあるサイトでは、追従バナーがヘッダーメニューと重なってしまうことがあります。これにより、ユーザーがメニューを利用しにくくなることがあります。追従バナーを特定の要素で非表示にする機能を使って、ヘッダーメニューとバナーが競合しないように調整できます。

以上で、特定の要素で追従バナーを非表示にする方法の解説を終了します。この方法を活用して、ユーザーにとって快適な閲覧環境を提供しましょう。

YouTubeのチャンネル登録はこちら!!
ポチッと応援よろしくね!!
開発・運営ランキング にほんブログ村 IT技術ブログ IT技術情報へ
記事を書いてる人
デプロイ太郎

IT業界の下層に長くいすぎたのかも知れないおじさんです。プロフィールまで見てくれてるのなら、ブログのブックマークとYouTubeのチャンネル登録とX(旧Twitter)のフォローお願いします。

ネットの裏側を見せるYouTube運営中!!

デプロイ太郎のSNSを見てみる!!
JavaScript
デプロイ太郎のSNSを見てみる!!

コメント

タイトルとURLをコピーしました