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

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

この記事では、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">で追従バナーを非表示にしたい要素を指定しています。

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

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

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

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

具体的な3つの実用例

  1. プロモーションバナーの表示制御
    ウェブサイトやブログにて、特定のキャンペーンやプロモーションをアピールするために追従バナーを使用することがあります。しかし、サイト内の特定のセクション(例えば、プライバシーポリシーや利用規約ページ)では、追従バナーを非表示にして、ユーザーに集中して読んでもらいたい場合があります。このようなケースで、追従バナーを特定の要素で非表示にする機能が役立ちます。
  2. コンテンツとの干渉を防ぐ
    記事や商品紹介ページで、大きな画像や動画などのビジュアル要素が含まれている場合、追従バナーが重要なコンテンツと干渉することがあります。追従バナーを特定の要素で非表示にする機能を利用することで、ユーザーが重要なコンテンツを見逃さないよう、適切なタイミングでバナーを非表示にできます。
  3. ヘッダーメニューとの競合を回避
    ページ上部に固定されたヘッダーメニューがあるサイトでは、追従バナーがヘッダーメニューと重なってしまうことがあります。これにより、ユーザーがメニューを利用しにくくなることがあります。追従バナーを特定の要素で非表示にする機能を使って、ヘッダーメニューとバナーが競合しないように調整できます。

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

記事を書いてる人

バツイチ貧乏ダメおやじ、自宅SE。20代ギャン中、30代アル中、40代再生中。ガラケー時代からWEB開発やってる自宅SEです。

「○○を知りたい!!」「○○が分からない!!」などありましたら、Twitterでもブログでもコメントいただければ、ご期待に添えるように頑張ります!

雨おやじのSNSを覗く!!
JavaScript
雨おやじのSNSを覗く!!
ITkagyo

コメント