フローティングバナー設置方法

Question

スマホページ上部にある検索窓から他店への流出を防ぐために
フローティングバナーを設置したいと考えております。

下記ページのようなフローティングバナーにしたいと思っております。
http://item.rakuten.co.jp/e-zakkamania/32140-1003370


設置につきまして２点質問がございます。

◆スクロール時にバナーを半透明にする方法。

◆バナーを２段にして、それぞれの段にカテゴリなどへのリンク先を設置する方法。


お忙しい中お手数をお掛け致しますがよろしくお願い致します。

Answer

ECマスターズの田中です。

＞◆スクロール時にバナーを半透明にする方法。
バナーを半透明にするためには、
フローティングバナーへのCSSに、透明度の指定を加えてください。

まなさんの店舗の場合、
https://ec-masters.club/forum/post_view.php?id=1576
上記URLの回答と同じ方法をご利用されておりますので、
CSSファイル内、「.spFixedBanner」への規則の中に、
opacity: 0.9;
という属性を加えていただければ結構です。
（数字は、0（完全透明）〜1（不透明）の間の小数でご指定ください）

この場合、「スクロール時に」という条件指定はできませんが、
いただいた商品ページの場合も常に半透明になっており、
本来ヘッダーにあるはずのパーツを画面外に追いやるCSSが適用されているため
バナーの裏に何もないように見えております。

本来のパーツを非表示にしたい場合は、CSS内に
body #ipnsh-header, body #rstTopSearch { visibility: hidden; }
という規則をくわえてください。

さらに、
body #ipnsh-header { height: 100px }
という規則を加えていただくことで、
ページ上部に出来た空白の幅を拡げることができますので、
バナーがページ内容に被った際にご利用ください。
（100px の数字を上下させることで、幅を調整できます）


＞◆バナーを２段にして、それぞれの段にカテゴリなどへのリンク先を設置する方法。
との間、バナー画像の直後に、
タグを使って表を作っていただくことで
設置できます。
下記のような形式になります。

===== この下の行から ================



カテゴリ1つ目
カテゴリ2つ目
カテゴリ3つ目
カテゴリ4つ目


===== この上の行まで ================

Answer

ご回答ありがとうございます！

度々の質問で申し訳ございません。

質問が２つございます。

①
下記のスマホページのように、ページ上部のオリジナル部分を、スクロールしたら
見えなくするにはどのような設定が必要でしょうか？

http://item.rakuten.co.jp/kojima-ya/383764/


②
スマホページ上部にある楽天仕様のメニューと店舗名の２段も見えなくしたいのですが
どのような設定が必要でしょうか？


お忙しい中お手数をお掛け致しますがよろしくお願い致します。

Answer

ECマスターズの田中です。

＞①
＞下記のスマホページのように、ページ上部のオリジナル部分を、スクロールしたら
＞見えなくするにはどのような設定が必要でしょうか？

CSSファイル内、「.spFixedBanner」への規則の中にある
display: fixed;
を
display: absolute;
にご変更ください。

＞②
＞スマホページ上部にある楽天仕様のメニューと店舗名の２段も見えなくしたいのですが
＞どのような設定が必要でしょうか？

下記規則を加えると、店舗名より上のパーツが全て非表示になります。
body #ipnsh-header, body #rstTopSearch, body #topFuncShopPopup, body #shopName { visibility: hidden; }

Answer

設置できました！
助かりました。

ありがとうございます！