이미지

HTML

  <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

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

グローバルメニュー

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

자바스크립트

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削除
  }
});