[css/jquery/wordpress] スクロールしてもページ上部に固定されるメニュー

スクロールしてもページ上部に固定されるwordpressメニューは以下のように実装する

メニュー部分

<div class="global-navi">
 <?php
 wp_nav_menu( array(
 'menu' => 'hogehoge', //どんな意味があるのかよく分かりません…
 'menu_class' => 'menu_class', // メニューを構成するul要素につけるCSSクラス名
 'menu_id' => 'menu_id', // メニュを構成するul要素につけるCSSI ID名
 'container' => 'div', // ulを囲う要素を指定。div or nav。なしの場合には false
 'container_class' => 'container_class', // コンテナに適用するCSSクラス名
 'container_id' => 'container_id', // コンテナに適用するCSS ID名
 'fallback_cb' => 'wp_page_menu', // メニューが存在しない場合にコールバック関数を呼び出す
 'before' => '[before]', // メニューアイテムのリンクの前に挿入するテキスト
 'after' => '[after]', // メニューアイテムのリンクの後に挿入するテキスト
 'link_before' => '[link_before]', // リンク内の前に挿入するテキスト
 'link_after' => '[link_after]', // リンク内の後に挿入するテキスト
 'echo' => true, // メニューをHTML出力する（true）かPHPの値で返す（false）か
 'depth' => 1, // 何階層まで表示するか。0は全階層、1は親メニューまで、2は子メニューまで…という感じ
 'walker' => '', // カスタムウォーカーを使用する場合
 'theme_location' => 'global', // メニュー位置を指定
 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', // メニューアイテムのラップの仕方。%1$sには'menu_id'のパラメータ展開、%2$sには'menu_class'のパラメータ展開、%3$sはリストの項目が値として展開されます
 ) );
 ?>
</div>

固定css

.fixed {
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 10000;
}

jquery実装

header.phpに以下のコードを実装する

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
 var nav = $('#global-navi'),
 offset = nav.offset();
 $(window).scroll(function () {
 if($(window).scrollTop() > offset.top) {
 nav.addClass('fixed');
 } else {
 nav.removeClass('fixed');
 }
 });
});
</script>