[mtmekj]

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

### 発生している問題

スマホサイトにてスクロールする前はお知らせバーを表示、スクロールするとお知らせバーだけが消えて、ロゴとハンバーガーメニューは表示したままにしたいが、どうすれば実現できますでしょうか？

実現したい理由：限られた上下スペースのスマホでは、お知らせバーがスクロール時に表示されたままですと、１ページ内の情報量が限られて見づらくなってしまうからです。

### 試したこと

ChatGPTと対話。

♥ 0

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

[キタジマ タカシ]

Snow Monkey は、HTML 要素の属性として、スクロールしているかしていないかを判別する data-scrolled というものを持っています。

なのでスマホのときだけ、スクロール時にお知らせバーを消したいということであれば下記の CSS で実現できます。

/* 画面幅が640px以下のときだけ */
@media not all and (min-width:640px) {
  /* スクロール時だけ */
  [data-scrolled=true] {
    /* お知らせバーを非表示 */
    .p-infobar-wrapper {
      display: none;
    }
  }
}

が、実際、スクロール時に消えるとすると、1pxでもスクロールした瞬間にパッと消えて、お知らせバー分の高さがなくなるわけなので、かなりガクついてしまいます。例えばスマホのときに未スクロールであれば画面下部に fixed 表示にするとか、何か調整が必要な気がします…。

♥ 0

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

[mtmekj]

お返事ありがとうございます。

false ではなくて trueにするとお知らせバーが消えました。

しかし、スマホ実機ブラウザで見ると消えませんでした。
そこでjsにすると消えました。

※JSをここに記述したらエラーで投稿できませんでした（汗）

余談ですが、
・スクロールしたらお知らせバーが消える機能
・左から右へ無限ループで画像が流れるアニメーション機能
など、実装に非常に苦戦しましたので、ぜひ簡単に実装できるプラグインまたはブロックエディタを制作していただけますと非常に嬉しく思います。
ご多忙とは思いますが、ぜひご検討願えますと幸いです。

この度はアドバイスありがとうございました！

♥ 1

いいねをした人:

[投稿者]

投稿