楽天スマホ商品ページのヘッダーを固定させる方法

Question

お世話になります。

現在スマホデザイン設定⇒商品ページ共通パーツ設定にて
iframeのページを商品画像の上に設置している状態です。

これらをスクロールしても付いてくるようにする方法を
ご教授頂けないでしょうか？

goldのトップページのヘッダーも同じタグでできるのでしたら、
どうように更新したいです。

宜しくお願い致します。

Answer

ECマスターズの田中です。

> これらをスクロールしても付いてくるようにする方法を
> ご教授頂けないでしょうか？

対象のiframeタグに対して
id="spFloatHeader"
を追記していただき、
下記scriptタグをご記載いただければ結構です。

= この下の行から ====================

#spFloatHeader {
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 20;
width: 100%;
}
#rstTopSearch, #ipnsh-header, #topFuncShopPopup {
position: relative;
z-index: 30;
background-color: white;
}

= この上の行まで ====================

禁止行為ガイドラインへの抵触を避けるため、
スクロールすると、本来のヘッダーの下から
出てくるような動作になります。

トップページでも、同じタグでご対応いただけます。
#rstTopSearch から { までの内容、タグ名後の「 =""」は不要ですが、
そのままでも構いません。

なお、ビーフさんのショップの商品ページを確認したところ、
商品画像上に、多数のコンテンツが掲載されておりました。
/sp/sph/sp_header.html だけでも、iPhone 6~8の画面の半分以上が
固定コンテンツで占められてしまいます。

上記の仕組みは、スマートフォン用商品説明文でも
動作いたしますので、本導入の前に、
任意の商品のスマートフォン用商品説明文にご設置の上、
どのように表示されるか予めご確認いただきますようお願いします。

Answer

ご返信ありがとうございます。

商品ページについてのご指摘ありがとうございます。
先に、トップページの方をさっそく更新してみたのですが
ヘッダー固定の次のバナーが重なってしまっているようなのですが、
修正箇所をご教授頂きたく存じます。

テストページをアップ致しました↓↓
https://www.rakuten.ne.jp/gold/ショップ名/sp/test220.html

ご確認宜しくお願い致します。

Answer

ECマスターズの田中です。

テストページをご用意いただき、ありがとうございます。

> 先に、トップページの方をさっそく更新してみたのですが
> ヘッダー固定の次のバナーが重なってしまっているようなのですが、
> 修正箇所をご教授頂きたく存じます。

画面固定表示にしたヘッダーは、
ページから浮かしたような状態となり、
ページの内容もその分上に詰められてしまいますので、

body#top_pageに対して
padding-top: calc( 12.5vw + 140px );
をご設定いただくなどして、
タグの上部にヘッダー分の余白を設けていただきますよう
お願いします。

なお、このヘッダーの高さのまま
商品ページに適用されますと、
ガイドラインで定められた部分からはみ出て、
ショップ名にヘッダーがかぶってしまいますので、

前回ご案内差し上げたスタイルシートの
#topFuncShopPopup と { の間に
, #shopName
を追記していただき、
ショップ名もヘッダーの上に表示されるように
ご設定願います。