スマホサイトにてスクロールしたらロゴとハンバーガーメニューが残り、お知らせバーだけが非表示になるようにするには?

0
いいねをした人: 居ません
  • このトピックには2件の返信、2人の参加者があり、最後にアバター画像mtmekjにより2ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #141831
    アバター画像mtmekj
    参加者
    2

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

    ### 発生している問題

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

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

    ### 試したこと

    ChatGPTと対話。

    0
    いいねをした人: 居ません
    #141838
    アバター画像キタジマ タカシ
    参加者
    2421

    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
    いいねをした人: 居ません
    #141841
    アバター画像mtmekj
    参加者
    2

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

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

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

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

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

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

    1
    いいねをした人:
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「スマホサイトにてスクロールしたらロゴとハンバーガーメニューが残り、お知らせバーだけが非表示になるようにするには?」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。