xhml・html

レスポンシブWebデザイン 2カラム左メニュー有り 固定

2019年03月19日
ネットビジネス便利ツール】のモバイル対応の続きです。
レスポンシブ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カラムでトップメニューがある場合です。と言っても左メニューと見た目はそんなに変わりません。
コメントの書き込み
コメント