xhml・html

【ネットビジネス便利ツール】のモバイル対応の続きです。
レスポンシブWebデザイン 2カラム左メニューあり その2で作ったメニューバー（ナビ）を、スクロールしても画面上部に常に表示されるようにします。

　

実際の画面です。スクロールしても、常に左メニュー、Home、Topが表示されています。


スクロール前の画面です。



ヘッダー・ナビゲーションを固定表示させるアイデア5つの途中から固定表示を参考にしました。ありがとうございます！

レスポンシブWebデザイン 2カラム左メニューあり その2のcss
/* スマートフォンだけ画面最上部までスクロール後固定 */
/* トップメニュー固定の項目で説明します */

#left_menu.fixed{

	position: fixed;

	top: 0;

}

が関係してきます。

$(function(){

	var _window = $(window),

	    _header = $('#left_menu'),

	    heroBottom;

	 

	_window.on('scroll',function(){     

	    heroBottom = $('#header').height();

	    if(_window.scrollTop() > heroBottom){

	        _header.addClass('fixed');   

	    }

	    else{

	        _header.removeClass('fixed');   

	    }

	});

	 

	_window.trigger('scroll');

});

jQueryを使っているので、まずjQueryを読み込む必要があります。
レスポンシブWebデザイン チェック・プルダウン表示非表示のプルダウンと同じです。

これで2カラムは終わりです。
次は1カラムでトップメニューがある場合です。と言っても左メニューと見た目はそんなに変わりません。