フローティングバナー（追従バナー）とは
フローティングバナーは、画面をスクロールしても常に特定の位置に表示されるバナーのことで、追従バナーとも呼ばれます。サイトの上部や下部、サイドに設置されるもので、ROKUSTARのサイトでいうと右下のバナーの部分にります。
今回はお客様からお問い合わせいただいた際にどのくらいで対応できるか目安になるように現在の「業務状況メーター」というフローティングバナーを設置してみましたので、その設置方法とサンプルコードを説明しておりますので実装する際の参考にしてください。
まずはフローティングバナーを表示したいページに下記 HTML と CSS をご自身のサイトに
サイズなどを調整して貼り付けてください。
HTMLはコチラ↓
<!--右側バナーHTML -->
<div class="meter-banner">
<button class="meter-banner-close">×</button>
<img src="image/fixed_banner.png" alt="業務状況メーター">
</div>
<!--クリックで別ページへ飛ぶ場合 -->
<div class="meter-banner">
<button class="meter-banner-close">×</button>
<a href="リンク先URL">フローティングバナーの名称</a>
<img src="image/fixed_banner.png" alt="業務状況メーター">
</div>CSSはコチラ↓
<!--右側バナーCSS -->
.meter-banner { /* 任意の名前 */
position: fixed; /* バナーを固定位置に配置 */
margin: 15px 20px;
z-index: 99998; /* 他の要素より前面に表示 */
bottom: 50px; /* バナーの下端からの設置位置 */
right: 0px; /* バナーの右端からの設置位置 */
}
.meter-banner-close {
font-weight: bold;
position: absolute;
top: 0px; /* 閉じるボタンのトップからの設置位置 */
right: 0px; /* 閉じるボタンの右端からの設置位置 */
z-index: 99999; /* 他の要素より前面に表示 */
padding: 4px 8px;
border: none;
background-color: #f8f8f8;
border-radius: 25px;
cursor: pointer;
-webkit-box-shadow: 0 0 7px rgb(0 0 0 / 40%);
box-shadow: 0 0 7px rgb(0 0 0 / 40%);次にバナーを閉じるための制御を実装する
閉じるボタンを動作させるためには、jQuery で制御を実装します。
公式サイトより必要なファイルを取得しサーバー上にアップロードするか、CDNを利用してください。
CDNを利用する場合は head タグ内に下記を貼り付けてください。
jQuery読み込みコードはコチラ↓
<!--右側バナーjQuery読み込み部分 -->
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>jQuery の読み込みを設定したら、下記の閉じる制御をページ内に貼り付けましょう。
head タグ内に貼り付ける場合は、jQuery の読み込みよりも下に貼り付けるようにしてください。
jQueryで閉じる制御コードはコチラ↓
<script>
$(function () {
$(document).ready(function () {
$('.banner-close').click(function() {
$(this).parent().hide();
});
});
});
</script>以上でサイト上にフローティングバナーを実装することが出来ました。
スマートフォンにも対応して表示することができます。
細かい部分は自分のサイトに合わせて調整してみてください。