ポートフォリオにグローバルメニューを導入しました。

イメージ

HTML

JSで#global-navを取得する部分が<nav id="global-nav">になります。

  <nav id="global-nav">
    <ul class="menu">
      <li class="menu-profile ">
        <a href="#profile-box" class="menu-list">PROFILE</a>
      </li>
      <li class="menu-skill">
        <a href="#skill-box" class="menu-list">SKILL</a>
      </li>
      <li class="menu-works">
        <a href="#works-box" class="menu-list">WORKS</a>
      </li>
      <li class="menu-contact">
        <a href="#contact-box" class="menu-list">CONTACT</a>
      </li>
    </ul>
  </nav>

CSS

グローバルメニューが画面上に達した時、.m_fixedが付与される。
.m_fixedが付与された時、position: fixed;で固定する。



/* ---------------------------------------------

グローバルメニュー

------------------------------------------------ */
# global-nav {
  background: #fff;
  width: 100%;
}
# global-nav.m_fixed {
  left: 0;
  position: fixed;
  top: 0;
}

JavaScript

#global-navを取得し、if文でグローバルメニューが画面上部に達した時、m_fixedクラスの追加。
達していない時、削除の処理をかく。

jQueryのメソッド

var navPos = jQuery( '#global-nav' ).offset().top;  // グローバルメニューの位置
var navHeight = jQuery( '#global-nav' ).outerHeight();  // グローバルメニューの高さ
jQuery( window ).on( 'scroll', function() {
  if ( jQuery( this ).scrollTop() > navPos ) {  // もしscrollTopの位置がnavPosより大きければ
    jQuery( 'body' ).css( 'padding-top', navHeight );
    jQuery( '#global-nav' ).addClass( 'm_fixed' );  // m_fixed追加
  } else {
    jQuery( 'body' ).css( 'padding-top', 0 );
    jQuery( '#global-nav' ).removeClass( 'm_fixed' );  // m_fixed削除
  }
});