お世話になります。

表題の件ですが、スマホ商品ページで以下のサイト様のように独自ヘッダーからドロワーメニューを出したいのですが、どうしてもうまくいきません。
参考サイト：LUIRE様
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/



最初、【ヘッダーだけを< ="">を使用し、スマホ用共通パーツ設定に書く→横から出てくるドロワーメニューをiframeにし、チェックボックスで動かす】ということを試みました。
”スクロールして、途中から独自ヘッダーが出る→画面上部に固定する”まではできました。
しかし、チェックボックスからができません。

参考サイトを見ると、

<header>
<div class="sp_header">ヘッダーになるもの</div>
<div classz="side_navi_outer">ドロワーメニュー</div>
　<input typeチェックボックス>
</header>

中身のsp_headerだけが上にあり、あとの<header>は一番下、side_navi_outerは左に待機
になっています。

そこで疑問が、
①そもそもヘッダー直打ち、ドロワーメニューiframeのやり方でチェックボックスON-OFFの挙動は実装できるのか？

②参考サイトは< ="">の形跡もない＆同一ページに書かれている気がしたので、ヘッダーフッターレフトナビを使用しているのかな？？と考えたのですが、それは可能なのか？
ということです。
②も試みてみたのですが・・・

検証ツールをうまく見れていないようです。JSだとしたら知識が足りず。
参考サイトのような動きをするにはどのように行ったら良いのかアドバイスをいただけないでしょうか。