ヘッダーメニューバー等の背景色のみを「position: fixed;」で乗算（mix-blend-mode: multiply;）する方法を紹介します。
SIM背景色のみを「position: fixed;」で乗算する場合、普通にコードを書くと表示がバグりやすいです。今回はそれを解決するコードをご紹介します。
目次
今回、実装するコードの概要
今回実装する２種類コードの表示やアニメーションをご確認下さい。
ヘッダーメニューバー等の背景色のみを「position: fixed;」で乗算（mix-blend-mode: multiply;）する方法
実装内容の概要は次のとおりです。
実装内容
- ヘッダーバーは上部固定：「position: fixed;」
- ヘッダーバーの背景色のみ乗算：「mix-blend-mode: multiply;」
- ヘッダーバー内のテキストは乗算しない
See the Pen Header_mix-blend-mode_position_fixed by s sim (@s-sim) on CodePen.
上記実装＋上のスクロールするとヘッダーが現れる方法
実装の概要は、上記コードにヘッダーバーのアニメーションを追加したものになります。
実装内容
- ヘッダーバーは上部固定：「position: fixed;」＋アニメーション
- ヘッダーバーの背景色のみ乗算：「mix-blend-mode: multiply;」
- ヘッダーバー内のテキストは乗算しない
- ヘッダーバーは下にスクロールするとスライドアップで消える
- ヘッダーバーは上にスクロールするとスライドダウンで現れる
See the Pen Header_mix-blend-mode_position_fixed by s sim (@s-sim) on CodePen.
ヘッダーメニューバー等の背景色のみを「position: fixed;」で乗算（mix-blend-mode: multiply;）する方法
See the Pen Header_mix-blend-mode_position_fixed by s sim (@s-sim) on CodePen.
HTMLの概要
HTMLの乗算設定におけるポイントは次のとおりです。
HTMLの乗算設定のポイント
- ヘッダーの「テキスト」と「背景色（乗算用）」のタグを兄弟関係で別々に作る
<body>
<header class="l-header">
<!-- ヘッダーのテキスト用タグ -->
<div class="header-bar">
<!-- 以下はヘッダーの中身：自由に書いて下さい -->
<div class="header-bar-contents">
<h1 class="c-h1">SIMS-CODE</h1>
<nav class="p-nav">
<ul class="p-nav_ul">
<li class="p-nav_li"><a href="#" class="p-nav_li-a">Menu 1</a></li>
<li class="p-nav_li"><a href="#" class="p-nav_li-a">Menu 2</a></li>
</ul>
</nav>
</div>
</div>
<!-- ヘッダーの背景色（乗算用）タグ -->
<div class="header_bg-color"></div>
</header>
<!-- 以下、 説明の便宜上書いたHTMLで直接関係ない-->
<main>
<div class="section_fv">
<img src="https://shimizu-create.com/wp-content/uploads/2024/03/fruit.jpg" alt="" class="fv-img">
</div>
<div class="section_text">
<div class="test">
<p>ヘッダー背景色のみ乗算</p>
<p>ヘッダーは「position: fixed;」で上部固定</p>
</div>
<div class="test">
<p>ヘッダー背景色のみ乗算</p>
<p>ヘッダーは「position: fixed;」で上部固定</p>
</div>
<div class="test">
<p>ヘッダー背景色のみ乗算</p>
<p>ヘッダーは「position: fixed;」で上部固定</p>
</div>
</div>
</main>
</body>CSSの概要
CSSの乗算設定におけるポイントは次のとおりです。
CSSの乗算設定のポイント
- 「position: fixed;」：ヘッダーの「背景色を除くコンテンツ（テキスト等）」タグと「背景色」タグに対して、それぞれに設定する
- z-index：「背景色」タグは「背景色を除くコンテンツ（テキスト等）」タグより小さくする
- 乗算設定：「背景色」タグに対して、背景色（例：background-color: #5C6F96;）と乗算設定「mix-blend-mode: multiply;」を書く
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
/* スクロールが末端に達したときのバウンスを禁止するCSS（無くても良い） */
overscroll-behavior-y: none;
}
/* -------------------------------------- */
/* ヘッダーのメニューバーの乗算設定 */
/* -------------------------------------- */
/* ヘッダーのメニューバーの背景色を除くコンテンツ */
.header-bar{
position: fixed;
z-index: 10;
width: 100%;
height:80px;
padding: auto 20px;
color: #fff;
}
/* ヘッダーのメニューバー背景色の乗算設定 */
.header_bg-color{
position: fixed;
z-index: 9;
width: 100%;
height: 80px;
top: 0;
background-color: #5C6F96;
mix-blend-mode: multiply;
}
/* -------------------------------------- */
/* 以下、体裁を整えるCSSなので直接関係ない */
/* -------------------------------------- */
/* ヘッダーのメニューバーのテキスト用設定 */
.header-bar-contents{
width: 100%;
height:80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.c-h1{
padding: 0 20px;
}
.p-nav{
padding: 0 20px;
}
.p-nav_ul{
display: flex;
gap: 20px;
}
.section_fv{
width: 100%;
/* max-width: 1440px; */
/* height: 100%; */
/* max-height: 768px; */
margin: 0 auto;
}
.fv-img{
width: 100%;
/* max-height: 768px; */
object-fit: cover;
aspect-ratio: 16 / 9;
}
.section_text{
height: 200vh;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 100px;
}
.test{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ヘッダーアニメーションの実装方法
上記ヘッダー乗算用のコードに、アニメーションを追加する方法をご紹介します。
See the Pen Header_mix-blend-mode_position_fixed by s sim (@s-sim) on CodePen.
HTML
上記アニメーションなしの場合とコードは同じです。
ただし、jQueryでアニメーションさせるため、jQuery読み込み用のコードを必要に応じてHTMLのbody閉じタグ直上辺りに追加して下さい。
<!-- jqueryのスクリプト -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="script.js"></script>WordPressでJavaScript(jQuery)をfunctions.phpで読み込ませる場合には下記を参照下さい。
SIMS-CODE
【WordPress】CSSとJavaScriptをfunctions.phpで読み込ませる方法【キャッシュ対策・Defer属性付き】 | SIM…
CSSとJavaScriptをfunctions.phpで読み込ませる方法をと、CSSやJSを変更した際にキャッシュをクリアしなくても変更が反映されるキャッシュ対策やページ読み込み速度に貢献…
CSSの概要
上記アニメーションなしのコードに、下記コードを追加するのみです。
/* ヘッダーの背景色を除くコンテンツ（テキスト等） */
.header-bar{
transition: .5s;
}
/* ヘッダーの乗算設定（背景色のみ） */
.header_bg-color{
transition: .5s;
}
/* ヘッダーのメニューバーが消えるときのCSS */
.header-bar.hide {
transform:translateY(-100px);
}
.header_bg-color.hide{
transform:translateY(-100px);
}コード解説
- 上記CSSは、メニューバーが下にスクロールした時にスライドアップする位置を設定したものです。
- 上記設定はヘッダーの「テキスト」「背景色」用の両方のタグに設定する必要があります。
- ヘッダーの「テキスト」「背景色」用タグのtransitionの数値はアニメーションの速度設定でお好みの数値にして下さい。
jQueryの概要
ヘッダーバーをアニメーションさせるためにjQueryの設定をする必要があります。
下にスクロールするとヘッダーバーがスライドアップで消え、上にスクロールするとスライドダウンで現れるアニメーションのjQueryは下記のとおりです。
$(function(){
//変数を定義
var pos = 0, winScrollTop = 0;
// PC用ヘッダー
var header = $('.header-bar, .header_bg-color');
$(window).on('scroll', function () {
winScrollTop = $(this).scrollTop();
if (winScrollTop >= pos) {
if (winScrollTop >= 200) {
header.addClass('hide');
}
} else {
header.removeClass('hide');
}
pos = winScrollTop;
});
});jQueryのポイント
ヘッダーの「背景色を除くコンテンツ」タグと「背景色（乗算）」タグの両方のclass属性に対して、アニメーションを設定する必要があります。
上の例では
// PC用ヘッダー
var header = $('.header-bar, .header_bg-color');
SIMS-CODE
【jQuery】ヘッダーメニューが下スクロールで消え、上スクロールで現れるアニメーション【iOSにも対応可】 …
ヘッダーメニューを下にスクロールするとスライドアップして見えなくなり、上にスクロールするとスライドダウンで現れるjQueryアニメーションの紹介。このアニメーションを…
