ヘッダーバナーを固定する方法について【楽天】

Question

はじめまして。とねっちと申します。よろしくお願いいたします。
http://www.rakuten.ne.jp/gold/huusuikazan/20150530supersalepc.html
↑
この企画ページのTOP上のバナーだけを固定したくて、いろいろと調べて挑戦はしたのですができなかったので、
スクロールしても、TOP上にバナーを固定できるCSSとｈｔｍｌを教えてください。
お願いいたします。
できればスマートフォンでも使えるｃｓｓとhtmlも教えてください。

Accepted Answer

ECマスターズの田中です。

当質問にていただいたような、
画面に固定されるバナーを簡単に設置できる
「バナー設置君」を作成いたしましたので、
全体公開前に、当質問への返信として、
先行してお知らせさせていただきます。

HTMLやスタイルシートを書くことなく、
完成したHTMLをヘッダー・フッター・レフトナビに貼り付けるだけで
固定バナーを簡単に設置することができます。

オプションを詳しく設定することで、
マウスを乗せると動いたり、半透明になったり、
IDを変えることで複数設置することも可能です。

もし、新しいバナーに入れ替える機会などありましたら、
ぜひ、下記URLより「バナー設置君」をお試しいただき、
わかりづらい点やご希望などございましたら
お知らせいただければと思います。
https://ec-masters.club/fwd3/fixedbannerkun

Answer

以下のHTMLをご利用ください。
スマートフォンでも動作いたします。

========= この行より下 =========

/* 固定表示バナー */
#fixedbanner{
display: block;
position: fixed;
top: 0px; /* [1]画面上端からの距離（下寄せの場合は bottom に変更してください） */
left: 0px; /* [2]画面右端からの距離（右寄せの場合は right に変更してください） */
width: 100%; /* 表示部分の横幅 */
/* 表示部分の縦幅は指定せず、自動で調整させるようにします */
position: expression('absolute');
top: expression((documentElement.scrollTop || document.body.scrollTop) + 0 + 'px'); /* 上記[1]と同じ値 */
left: expression((documentElement.scrollRight || document.body.scrollRight) + 0 + 'px'); /* 上記[2]と同じ値 */
}
#fixedbanner img{ width: 100%; }


========= この行より上 =========

Answer

すっきりしました＾＾
ありがとうございました。