Help us understand the problem. What is going on with this article?

スクロール時、グローバルメニューの固定

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

イメージ

Image from Gyazo

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削除
  }
});
yummy888
エンジニア目指して、就活中です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away