上部固定のナビゲーションが非表示になる

♥ 0

Who liked: No user

このトピックには1件の返信、2人の参加者があり、最後にキタジマタカシにより5ヶ月前に更新されました。

2件の投稿を表示中 - 1 - 2件目 (全2件中)

投稿者

投稿
2025年6月10日 2:35 PM #145383
GONSY
参加者

♥ 846
【Snow Monkey】29.0.2
【Snow Monkey Blocks】24.0.4
【Snow Monkey Editor】11.0.2
【PHP】8.2.22
【ブラウザ】Chrome 137.0.7151.69
【当該サイトのURL】ローカルのテスト環境のため共有不可

### 発生している問題
Snow Monkey （テーマ）のバージョンによるものかと思いますが、また操作としてはレアケースですが、以下の条件で .l-header 要素が非表示になりました。

▼設定条件
- ヘッダーレイアウト：1行
- PC 用ヘッダー位置：上部固定
▼操作条件
1. ページをスクロールして右下に出現するページトップへのボタンを押下しヘッダーに移動します。<br>その際、URLは https://example.com/#body
2. この状態でブラウザの【再読込】を実施。
3. 画面をスクロールすると、上部固定している .l-header 要素が非表示になる。<br>さらにスクロールで上部に戻ると.l-header 要素自体が空白になる
※ショーケースで紹介されている、同条件のサイトでも同様の症状が見られました。

大分県玖珠九重日田 | ホームページ制作翻訳 | nicika (ニシカ)

大分県を拠点にホームページや印刷物制作から、多言語翻訳とインバウンド支援までワンストップで対応しています。WEBや翻訳、海外仕入に関するご相談など柔軟に対応します…

nicika-work.com

### 試したこと
上記の条件で以下のCSSが適用されることにより非表示になると思いました。
```
.l-header[aria-hidden=true], .l-header[aria-hidden=true] .p-drop-nav {
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
}
```
現状の対策として以下を追記しています。
```
.l-header[aria-hidden=true] .p-drop-nav,
.l-header[aria-hidden=true] {
	opacity: 1;
	visibility: visible;
}
```
一度ご確認いただけると助かります🙇‍

♥ 0

Who liked: No user
2025年6月11日 1:54 PM #145398

キタジマタカシ
参加者

♥ 2621

ご報告ありがとうございます！

上部固定のときに、アンカー付きでページを表示した場合、ヘッダー非表示 + アンカーで指定した位置がページ最上部にくる状態で表示する、という機能があります。どうもそれがページトップへ戻るの機能と干渉してしまっているようです。

ページトップへ戻るのアンカーリンクのときは無視するように変更してみようと思います。次のアップデートで反映します！

♥ 0

Who liked: No user
投稿者

投稿