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

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

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

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

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