ヘッダーのメニューバー固定

Question

お世話になっております。

他社様のサイトを参考にして、自分なりに固定しようと奮闘しているのですが、
下記ページのようにうまく固定できておりません。
http://www.rakuten.ne.jp/gold/toyamawebshop/

理想は、top:200px　あたりからはじまるiframeで作った高さ100pxのメニューを、
スクロールするとメニュー部分だけ一番上に固定して、そのままスクロールされる状態です。

ソースがかなり汚いですがよろしくお願いいたします。

Answer

ECマスターズの田中です。

http://www.rakuten.ne.jp/gold/toyamawebshop/
このページの最上にあるメニューを
top:200px; の位置に設置し、スクロールと共に動かして、
上端に着いた途端に固定表示するようにしたい、
ということでしょうか。

現状ですと、親要素の「〜」より
「」を修正する方が
修正点が少ないので、後者を修正する方法をご案内いたします。

まず、メニューが初めから画面上に固定されている理由ですが、
http://www.rakuten.ne.jp/gold/toyamawebshop/css/default.css
http://www.rakuten.ne.jp/gold/toyamawebshop/css/suyamin.css
以上２つのCSSファイル内で、
「#head_frame」に対して「position:fixed;」が指定されていることが原因です。
この「fixed」を「relative」にご変更いただき、
直上の要素と相対的な位置に設置されるようにしていただくことで、
画面上端から200pxの位置に設置されます。

次に、ヘッダー内に、スクロールに応じて固定表示させるための

===== この下の行から ================
$(function() {
  $(window).on('scroll', function() {
    if ($(this).scrollTop() > 50) {
      $('.header').addClass('fixed');
    } else {
      $('.header').removeClass('fixed');
    }
  });
});
===== この上の行まで ================

上記JavaScriptが記載されておりますが、

2箇所ある「.header」は固定させたい要素を指定するためのセレクタです。
今回は「」を固定させたいので、
2箇所とも「#head_frame」にご変更ください。

また、上記コード3行目の「50」が固定表示を開始させる位置を示しておりますので、
今回の場合は「200」にご変更ください。

最後に、上記ソースによって
「」に「fixed」クラスが
追加された場合に、固定表示させるための
下記スタイルシート規則を追加することで、
画面スクロールに応じて固定表示される動作が可能となります。

===== この下の行から ================
#head_frame.fixed { position: fixed; }
===== この上の行まで ================

Answer

ECマスターズ
田中様

ご返信有難うございます。
大変丁寧な解説で理解したつもりで実践してみましたが、
記載通りに記述しても、メニューが固定されません。
別のJavascriptが邪魔しているのでしょうか・・・。
申し訳ございませんが、ご確認お願いいたします。

Answer

ECマスターズの田中です。

http://www.rakuten.ne.jp/gold/toyamawebshop/css/default.css
http://www.rakuten.ne.jp/gold/toyamawebshop/css/suyamin.css
以上２つのCSSファイル内で、未だに
「#head_frame」に対して「position:fixed;」が指定されております。
改めて、「position:relative;」へご変更をお願いします。

また、先述のJavaScriptのコードを動作させるには
jQueryが必要なのですが、
先にjQueryが読み込まれていないため、
エラーが発生しておりました。

このコードより先にjQueryを読み込むため、

index.htmlの767行目にある
「jquery.min.js」を読み込むタグを
削除していただいた上で、

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
上記JSファイルをダウンロード、
および楽天GOLDにアップロードしていただき、

38行目の空白に

という形式で挿入していただきますようお願いします。

Answer

ありがとうございます。

追記のスクリプトを後方にある、jquery.min.jsの読み込み後に持ってくることで、無事実装できました。
前方にスクリプトの読み込みをもってくると動作が重くなっている気がしましたので。
default.cssの方は、不恰好ですが商品ページ内で使用するためそのまま残し、
とりあえずトップページでのみ実装するため、トップページで優先されるsuyamin.cssの方のみで、
position:fixed;を書き換えました。

見難いソースにもかかわらず丁寧なご助言をいただきましてありがとうございました！