yahooショッピングのヘッダーについて

Question

お世話になっております。
ヤフーショッピングのヘッダー部分を、iframeでindex.htmlを読み込み作成しております。

トップページと商品ページのどちらから見ても同じヘッダー(index上部）が表示され
ページをスクロールして行くとある程度のところから
ページ上部に固定されるメニューを作成したいのですが、商品ページ上部では
どうもうまく機能してくれません。
（爽快ドラッグさんのページのような形式を希望しています）

お力をお借りしたく投稿させていただきました。
何卒よろしくお願い申し上げます。

Answer

ECマスターズの伊藤です。

> トップページと商品ページのどちらから見ても同じヘッダー(index上部）が表示され
> ページをスクロールして行くとある程度のところから
> ページ上部に固定されるメニューを作成したいのですが、商品ページ上部では
> どうもうまく機能してくれません。

下記のコードを、ヘッダーに登録して、
お試しくださいませ。



固定したいヘッダー



↓↓↓外部CSSに以下を記述↓↓↓

#wrapper2 .h_fr_sc {
    z-index: 3000!important;
}
.h_fr_sc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9990;
}
body > #wrapper {
    z-index: 5000!important;
    position: relative!important;
}
#shpBody .mdStickyNav.elSticky {
    display: none;
}

Answer

伊藤様

おはようございます。ご教示いただきありがとうございます。
上記CSSで確かにheader上部を固定することが出来ました。

説明が下手で申し訳ないのですが、ページをある程度スクロールすると
固定用の別のメニューが出るように設定したいのです。

HTML↓↓↓
 通常表示メニュー
固定用メニュー←スクロール後画面上部に固定

CSS↓↓↓

.header{
width: 1170px;
position: relative;
z-index:2;
	}

.fix-header {
width: 100%;
position: fixed;
top:0;
z-index: 1;
}

1.headerの後ろに隠してあるfix-headerを作成し、indexだけを確認すると上手く
表示されるのですが、ストアクリエイターのヘッダー画面からiframeで読み込むと
ヤフー固定の案内（ヤフーショッピングのロゴ等）の後ろに重なり上手く隠す事が出来ません。
※indexでも横が隠れきらないので、どうしたら良い物か考え中でございます。

2.同じページに、ページ下部に固定されるバナーも作成しました。
（これはスクロールに関係なく常に同じ画像を表示させたいです）
indexでは固定されるのに、商品ページには反映されません。

度々の質問で申し訳ありませんが、改めてご教示いただけると幸いです。
よろしくお願い申し上げます。

Answer

ECマスターズの伊藤です。

> 1.headerの後ろに隠してあるfix-headerを作成し、indexだけを確認すると上手く
> 表示されるのですが、ストアクリエイターのヘッダー画面からiframeで読み込むと
> ヤフー固定の案内（ヤフーショッピングのロゴ等）の後ろに重なり上手く隠す事が出来ません。
> ※indexでも横が隠れきらないので、どうしたら良い物か考え中でございます。


現在のトップページの動作と、
爽快ドラックの動作のイメージが異なりますが、
爽快ドラックのイメージでよろしいでしょうか。

その場合は、下部に記載したコードとなります。
なお、修正すると、トップページにも適用されると思いますので、
class名を変更された方がよろしいかと思います。

> 2.同じページに、ページ下部に固定されるバナーも作成しました。
> （これはスクロールに関係なく常に同じ画像を表示させたいです）
> indexでは固定されるのに、商品ページには反映されません。

コードやページにより、対応方法が異なりますので、
適用頂いているページのURLを頂戴できますでしょうか。

また、イメージが異なる場合、実際に適用頂いたページと
イメージが異なる箇所の詳細の、ご連絡をお願いいたします。

https://shopping.geocities.jp/xxxxxx/import.css
.fix-header {
background-color:#FFF;
line-height: 66px;
height: 66px;
top: -66px;/* 上に隠す高さ */
left: 0;
text-align: center;
width: 100%;
margin: 0 auto;
color: #fff;
position: fixed;
opacity:0;/* 	最初読み込んだときは透過 */
z-index: 1000;/*　他のアイテムに対して最上位のレイヤーになるように */
/*	opacity: 0; */
box-shadow:0px 5px 0px rgba(0, 0, 0, 0.1);
}

こちらの部分が影響してしまいすので、
削除をお願いします。



.header{
width: 1170px;
position: relative;
z-index:2;
}

#wrapper2 .fix-header {
z-index: 3000!important;
}
.fix-header {
background-color: #FFF;
line-height: 66px;
height: 66px;
left: 0;
text-align: center;
width: 100%;
margin: 0 auto;
color: #fff;
position: fixed;
box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.1);
z-index: 9990;
}
body > #wrapper {
z-index: 5000!important;
position: relative!important;
}
#shpBody .mdStickyNav.elSticky {
display: none;
}

Answer

伊藤様

ご回答ありがとうございます。
ご指導いただいた通りにやってみたのですが、思った通りになりませんでした。

爽快ドラッグさんの件は一度忘れてください。

https://store.shopping.yahoo.co.jp/ecotte-shopxxxxx(弊社ID)/index.html
現在反映している状態をご確認いただけないでしょうか。

1.上記状態が求めているものです。（隠れ切れていない部分は後日調整）

2.適当な商品ページをご確認ください。
当初の話と異なり大変申し訳ないのですが、現在欲しいメニューが
ページ最上部で最初から表示されてしまっております。
また、スクロールしてページ下部へ移動するとヤフーの検索窓が出て来て
弊社のメニューが隠れてしまいます。

商品ページでも1の状態のメニューを作りたいのですが、改めてご指導いただけないでしょうか。

ページ下部に固定されるバナーの件は解決しました。ありがとうございます。

Answer

ECマスターズの伊藤です。

> 当初の話と異なり大変申し訳ないのですが、現在欲しいメニューが
> ページ最上部で最初から表示されてしまっております。

z-indexが効いていないのが原因となっております。
先にご案内していた

#wrapper2 .fix-header {
z-index: 3000!important;
}

body > #wrapper {
z-index: 5000!important;
position: relative!important;
}

の適用を、お願いいたします。


> また、スクロールしてページ下部へ移動するとヤフーの検索窓が出て来て
> 弊社のメニューが隠れてしまいます。

#shpBody .mdStickyNav.elSticky {
display: none;
}

こちらがヤフーの検索窓を非表示とする部分ですので、
適用をお願いいたします。

Answer

伊藤様

何度も何度もご確認いただき本当にありがとうございました！

#shpBody .mdStickyNav.elSticky {
display: none!important;
}
にしたところ、理想とする形になりました。
全然わからなかったので、大変助かりました。どうもありがとうございました！

今後ともよろしくお願い申し上げます。