スマホページでスクロールすると現れるヘッダの作り方

Question

このページみたいにスクロールするとヘッダやバナーが上部に固定で表示されるようにする方法を教えてください。

https://item.rakuten.co.jp/luire/placge1000/?force-site=ipn

ヘッダはトップページに飛ぶリンクになっていればよく、参考ページのヘッダにあるメニューの表示は不要です。

Accepted Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

最初に、ヘッダーとして表示させるためのHTMLファイルを、
楽天GOLD内に設置してください。

次に、下記の内容でCSSファイルを作成し、
楽天GOLD内に設置してください。
===== この下の行から ============ 
.spHeader {
display: block;
position: fixed;
left: 0px;
top: 0px;
z-index: 2;
width: 100%;
height: HTMLの内容の高さpx;
}
#ipnsh-header, #rstTopSearch {
position: relative;
z-index: 3;
background: white;
}
#topFuncShopPopup{
z-index: 3;
}
===== この上の行まで ============
※HTMLの内容の高さは、実際の数値にご変更ください。

最後に、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
スライドすると出てくる独自ヘッダーを設定することができます。
===== この下の行から ============


===== この上の行まで ============
※CSSファイルのURL・ヘッダー用ページのURLは、実際のURLにご変更ください。