ポートフォリオにグローバルメニューを導入しました。
イメージ
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
クラスの追加。
達していない時、削除の処理をかく。
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削除
}
});