第一回　ヘッダーメニュー固定について

1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。

2. 今回はタブレット以上で#header要素内の.navbar-defaultの固定を公開サイト内の全てのページに適用したいので、Google Analyticsモジュールの</HEAD>タグ直前に追加していく。
 ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず、スクロールしてヘッダーメニューの位置が上まで来たときに.navbar-defaultにclassを追加するJavaScriptを記述。

▽記述例▽（JavaScript）

------------

<script>
(function($){$(function(){
if (window.matchMedia( '(min-width: 768px)' ).matches) { 
var navPos = $( '#header .navbar-default' ).offset().top; // グローバルメニューの位置
var navHeight = $( '#header .navbar-default' ).outerHeight(); // グローバルメニューの高さ
if (window.matchMedia( '(min-width: 768px)' ).matches) {
$( window ).on( 'scroll', function() {
if ( $( this ).scrollTop() > navPos ) {
$( 'body' ).css( 'padding-top', navHeight );
$( '#header .navbar-default' ).addClass( 'm_fixed' );
} else {
$( 'body' ).css( 'padding-top', 0 );
$( '#header .navbar-default' ).removeClass( 'm_fixed' );
}
});
};
};
});}(jQuery));
</script>

------------

4. 3で追加したclassにスタイルを追加する。
※メニューのクラスを指定する際は、他のメニューに影響が及ばないように#headerと前につけてスペースを空けて記述してください。

▽記述例▽（CSS）
------------

<style>
#header .navbar-default.m_fixed {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 100;
}
</style>

------------

　　 Google Analyticsモジュールへの記述で公開サイトにのみ適用。

▽記述例▽（CSS）
------------

------------

 ▽記述例▽（JavaScript）

------------

------------

■編集手順
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素の固定を公開サイト内の全てのページに適用したいので、
　 Google Analyticsモジュールの</HEAD>タグ直前に<style></style>タグを登録し、
　 必要なCSSを追加していく。
　 ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
　　 Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず固定したい要素にposition: fixed;を指定する。
4. z-indexで画面の最前面にくるように指定。
　 ※数値はあまり大きいとログインボックスなどが隠れてしまうので開発モードなどで適度な数値を確認すること。
5. 幅や背景色を指定してデザインを整える。

▽記述例▽（CSS）
------------
<style>
@media (min-width: 768px) {
#header {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100vw;
    background-color: #fff;
}
}
</style>
------------

6. ヘッダーが固定になり要素の高さが認識されなくなった分、
　 次の要素（サンプルサイトの場合は#container）がヘッダーの下に隠れてしまうため、
 　この高さ分の余白をJavascriptで追加。

▽記述例▽（JavaScript）
------------
<script>
jQuery(function(){
    var headerH = jQuery( '#header' ).outerHeight(); //#headerの高さを取得
    if (window.matchMedia( '(min-width: 768px)' ).matches) { //ウィンドウ幅が768px以上の時
        jQuery(function(){
           jQuery( '#wrapper' ).css( 'padding-top', headerH ); //#headerの高さを余白として追加
        });
    };
});
</script>
------------

■注意事項
ページ内リンクなどアンカーへのジャンプを設定している場合は固定されている要素（HEADERブロック）の下へ隠れてしまいますので、
アンカーの位置を調整するかJavascriptなどで移動する位置を調整して対応してください。
    

■編集手順
1. ブラウザの開発モードで固定したい要素のclassやidなどを確認する。
2. 今回はタブレット以上で#header要素の固定を公開サイト内の全てのページに適用したいので、
　 Google Analyticsモジュールの</HEAD>タグ直前に<style></style>タグを登録し、
　 必要なCSSを追加していく。
　 ※ダイレクト編集のOKボタンなどがヘッダーの下に隠れてしまう可能性があるため、
　　 Google Analyticsモジュールへの記述で公開サイトにのみ適用。

3. まず固定したい要素にposition: fixed;を指定する。
4. z-indexで画面の最前面にくるように指定。
　 ※数値はあまり大きいとログインボックスなどが隠れてしまうので開発モードなどで適度な数値を確認すること。
5. 幅や背景色を指定してデザインを整える。

▽記述例▽
------------
<style>
@media (min-width: 768px) {
#header {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100vw;
    background-color: #fff;
}
}
</style>
------------

6. ヘッダーが固定になり要素の高さが認識されなくなった分、
　 次の要素（サンプルサイトの場合は#container）がヘッダーの下に隠れてしまうため、
 　この高さ分の余白をJavascriptで追加。

▽記述例▽
------------
<script>
jQuery(function(){
    var headerH = jQuery( '#header' ).outerHeight(); //#headerの高さを取得
    if (window.matchMedia( '(min-width: 768px)' ).matches) { //ウィンドウ幅が768px以上の時
        jQuery(function(){
           jQuery( '#wrapper' ).css( 'padding-top', headerH ); //#headerの高さを余白として追加
        });
    };
});
</script>
------------

■注意事項
ページ内リンクなどアンカーへのジャンプを設定している場合は固定されている要素（HEADERブロック）の下へ隠れてしまいますので、
アンカーの位置を調整するかJavascriptなどで移動する位置を調整して対応してください。