サイドバナーを固定（フローティングバナー）に変更する方法　

Question

初歩的な質問で恐縮ですが、店舗のサイドバナーをスクロールしても固定で表示される
バナーに変更したいと思っています。

どのようなタグを組めば良いでしょうか。

absolute　を　fixed　に変えてみたところ画面が崩れてしまいました。
ご教授頂けると幸いです。　



使用タグ　

table {position:static;}

#tate_left a,
#tate_right a {
	display: block;
	margin-bottom: 16px;/*	min-height: 100%;
	width: 78px; 　　　　　　
	visibility: visible;
	height: 16000px;
	text-indent:-9999px;*/
	
}

#tate_left,
#tate_right {
	position: absolute;
	width: 78px;  　　　　　 /* 画像の横幅 */
	min-height:100%;
	visibility: visible;
	display: block;
	margin-top: 300px;
}
#tate_left { left: 0px; }
#tate_right { right: 0px; }


/***********************
   左縦帯バナー設定
************************/
.tateobi1 {
	/* background: url(http://image.rakuten.co.jp/mugendo/cabinet/03317856/imgrc0067677198.jpg) repeat-y scroll;
	min-height: 100%;
	[disabled]height: 5200px; */
	top: 70px;
	z-index: auto;
	visibility: visible;
}
/***********************
   右縦帯バナー設定
************************/
 .tateobi2 {
	top: 70px;
	z-index: auto;
	visibility: visible;
}

 .tateobi2 .banner01 {

}

 .tateobi2 .banner02 {

}

 @media screen and (max-width: 1200px) {
 #tate_left,  #tate_right {
	visibility: hidden;
	} 
} 　 

 // サイドバナー設定　end //

Answer

ECマスターズの田中です。

タグの全体を、下記のようにご変更いただくといかがでしょうか。

===== この下の行から ================

table {position:static;}

#tate_left a,
#tate_right a {
	display: block;
    margin-bottom: 16px;
}

#tate_left,
#tate_right {
	position: fixed;
	margin: 0;
	padding: 0;
}
#tate_left{
	left: 0px;
	width: 100px;
	height: 100vh;
	display: block;
}
#tate_right {
	right: 0px;
	width: 78px;
	display: block;
}


/***********************
   左縦帯バナー設定
************************/
.tateobi1 {
	/* background: url(http://image.rakuten.co.jp/mugendo/cabinet/03317856/imgrc0067677198.jpg) repeat-
y scroll;
	min-height: 100%;
	[disabled]height: 5200px; */
	top: 0px;
	z-index: auto;
	visibility: visible;
}
/***********************
   右縦帯バナー設定
************************/
 .tateobi2 {
	top: 70px;
	z-index: auto;
	visibility: visible;
}

 .tateobi2 .banner01 {

}

 .tateobi2 .banner02 {

}

 @media screen and (max-width: 1200px) {
 #tate_left,  #tate_right {
	visibility: hidden;
	} 
} 　 

 // サイドバナー設定　end // 
===== この上の行まで ================

変更箇所は、#tate_left・#tate_right関連全体と、
.tateobi1 のtopの数値になります。

なお、拝見したところ、
同じCSS設定が、カテゴリページにある別のバナーにも適用されているようで、
上記タグをそのまま適用すると、
カテゴリページのバナーの表示が崩れる可能性があります。

カテゴリページでは別のバナーを表示される際は、
ヘッダー・フッター・レフトナビを分けるか、classやidの名前を変えて
別途CSS規則を作っていただけますでしょうか。

また、今回の変更を行う前に、
現在のヘッダー・フッター・レフトナビを複製していただき、
いつでも元に戻せる状態を作っていただきますようお願いいたします。

Answer

いつもありがとうございます。

コピーを作成し実施したところ無事固定バナーで表示されるようになりました。
本当にありがとうございます。

（バナーの大きさを調整しなければならなそうなので改めて本番に反映します）

カテゴリページでは別のバナーを表示される際は、
ヘッダー・フッター・レフトナビを分けるか、classやidの名前を変えて
別途CSS規則を作っていただけますでしょうか。　　　→　他のページと同様のバナーを表示したいと思っているのですが、
どのようにすればよいかお教え頂けませんでしょうか。

Answer

ECマスターズの田中です。

＞他のページと同様のバナーを表示したいと思っているのですが、
＞どのようにすればよいかお教え頂けませんでしょうか。

只今、私にて確認したところ、
私が同じCSS設定が別のバナーに適用されていると思っていたのは
レフトナビにある「楽天限定ギフト」「ご贈答用稲庭うどん」などの
リンク先となっているカテゴリページだったのですが、
現在も問題なくサイドバナーが表示されておりました。

別のヘッダー・フッター・レフトナビを
適用されておりましたので、
もし同様のバナーを表示される場合は、
各カテゴリに適用するヘッダー・フッター・レフトナビをご変更ください。

Answer

ありがとうございます。

無事解決いたしました。