2024/07/08
2024/02/25 （更新日: 2024/02/27）
固定要素を”特定の位置までスクロールしたら消す”方法【サンプルあり】
See the Pen infiniteslider
具体的な使い方として、固定ボタンをフッターに差し掛かった時に消すことができます。
アニメーションも自由に組み込むことができるので様々な応用ができます。
また、よく紹介されている実装方法では表示・非表示の切り替わり境界線で要素がチカチカするような場合がありますが、今回の方法ではその不具合も回避しています。
実装手順
01表示・非表示エリアを指定
今回はコンテンツを表示するエリアを「visible-area」非表示にするエリアを「hidden-area」とします。
<body>
<main class="visible-area">
メインコンテンツが入ります。
</main>
<footer class="hidden-area">
フッターなど、固定要素を非表示にするエリア
</footer>
</body>02固定コンテンツを設置
固定したいコンテンツ全体を囲うタグに「fixed-content」クラスを付与します。ここでposition:fixedを指定し固定します。また、他要素に被って隠れてしまわないようz-indexを指定します。
<div class="fixed-content">
<p>固定要素</p>
</div>.fixed-content {
position: fixed; /* 重要 */
top: 20px;
left: 50%;
transform: translateX(-50%);
pointer-event: all;
z-index:999; /* 重要 */
}
.fixed-content a {
background: blue;
color: #fff;
font-weight: bold;
text-align: center;
display: block;
padding: 10px 20px;
}03表示・非表示の動きの組み込み
まず、jsファイルにjavascriptで動きを指定します。
内容は、表示・非表示のエリアを認識し、固定要素がエリアに差し掛かった場合に「visible」or「hidden」クラスを固定要素に追加するものです。
const fixedElement = document.querySelector('.fixed-content'); // 非表示にしたい固定要素
const targetElement = document.querySelector('.hidden-area'); // 固定要素が差し掛かる対象の要素
// 固定要素の初期表示状態を設定
let isHidden = false;
// スクロールイベントを監視
window.addEventListener('scroll', () => {
// 固定要素と対象要素の位置を取得
const fixedElementRect = fixedElement.getBoundingClientRect();
const targetElementRect = targetElement.getBoundingClientRect();
// 固定要素が対象要素に差し掛かった場合、非表示にする
if (
fixedElementRect.bottom >= targetElementRect.top &&
fixedElementRect.top <= targetElementRect.bottom
) {
if (!isHidden) {
fixedElement.classList.remove('visible'); // 固定要素を非表示にする
fixedElement.classList.add('hidden'); // 固定要素を非表示にする
isHidden = true; // 非表示フラグを設定
}
} else {
if (isHidden) {
fixedElement.classList.add('visible'); // 固定要素を非表示にする
fixedElement.classList.remove('hidden'); // 固定要素を再表示する
isHidden = false; // 非表示フラグを解除
}
}
});04cssでスタイリング
次にcssで固定要素に「visible」or「hidden」クラスが付いた時のスタイリングをします。
opacity（透過）で表示・非表示をコントロールします。
display:none;で非表示にしてしまうと、前述した境界線でチカチカするバグが発生したり、アニメーションを入れることができないためです。
透明化しているだけなので要素は存在している状態です。「hidden-area」にaタグボタンなどがある場合は固定要素と被ってクリックできなくなってしまいます。
それを回避するため「hidden」クラスと「visible」クラスにpointar-eventを指定し、クリックイベントをコントロールします。
.hidden {
animation: fade .2s ease-in-out forwards;
pointer-events:none;/* 重要 */
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.visible {
animation: fadeOut .2s ease-in-out forwards;
pointer-events:all;/* 重要 */
}
@keyframes fadeOut {
from {
opacity: 0;
}
to {
opacity: 1;
}
}【まとめ】
See the Pen infiniteslider
これで実装完了です！
活用例・応用
上記のコードを基本形として実装例、応用例を紹介します。（コピペ可）
スクロール追従問い合わせボタン
See the Pen infiniteslider
コーポレートサイトなどに見られるCTAボタン（問い合わせ）を並べたレイアウトです。フッターに差し掛かるとボタンが非表示になります。
特定の領域（複数）で非表示になるボタン
See the Pen infiniteslider
デザイン上画面全体を見せたいセクションのみ固定ボタンを非表示にします。
ボタンを非表示にする領域を複数指定するためにscriptにdocument.querySelectorALLを使用します。
画面端から出てくるボタン
See the Pen infiniteslider
クリックするとページトップにスクロールされるボタンなど、画面端にあるボタンを横から出現させます。（実際にトップにスクロールされる機能は組み込んでいません）
このようにスタイリングが自由にできるので様々な固定要素に活用してください！
