メインビジュアルをオーバーレイにし、ロゴを非表示。ページスクロールしたときに初めて、ヘッダーにロゴやメニューが表示さえるようにしたい。

♥ 0

いいねをした人: 居ません

このトピックには2件の返信、2人の参加者があり、最後にuhにより4ヶ月、 1週前に更新されました。

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

投稿者

投稿
2024年6月3日 10:17 PM #139886

uh
参加者

♥ 6

【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】
【当該サイトのURL】

### 実現したいこと
メインビジュアルをオーバーレイにし、ロゴを非表示。
ページスクロールしたときに初めて、ヘッダーにロゴやメニューが表示さえるようにしたい。

現在、PC用ヘッダー位置を「オーバーレイ（上部固定/スクロール時背景白）」に設定しています。
メインビジュアルを画面いっぱいに表示させたいため、ヘッダーに設定しているサイトロゴを非表示にさせたいです。
可能でしょうか？

♥ 0

いいねをした人: 居ません

2024年6月4日 10:52 AM #139899
キタジマタカシ
参加者

♥ 2379
Snow Monkey はスクロールしているかしていないかが html 要素の data-scrolled 属性で確認できるので、それを使うのが良いと思います。
```
/* スクロールしていないときはヘッダーを隠す */
[data-scrolled="false"] .l-header {
  visibility: hidden;
}
```
♥ 0

いいねをした人: 居ません
2024年6月12日 9:12 AM #140081

uh
参加者

♥ 6

キタジマさん、早速の助言をありがとうございました！
いただいたコードで実装ができました。
グローバルナビはふわっと出現するので、ロゴも合わせてふわっと出したくなっているので
チャレンジしてみます！

クローズさせていただきます。ありがとうございました。

♥ 1

いいねをした人:
投稿者

投稿