スクロールすると画面上部に固定されたメニューバーが出現する方法　

18.11.20

ある程度スクロールされたときに、上端にメニューバーを表示する方法

htmlには元のヘッダー(id=”header_wrap”)とコピーしたヘッダー(id=”header_wrap02″)両方を書き込む。

 <div id="header_wrap">
  <div id="header" class="clearfix">

   <!-- logo -->
   <h1 id="logo_text"><a href="http://noahsark.tank.jp/">ノアズアーク　ホームページ制作</a></h1>
<h2 id="description">初期費用無料！月額費用のみ２万円。格安・激安ホームページ制作</h2>

   <!-- global menu -->
   <a href="#" class="menu_button">menu</a>
   <div id="global_menu" class="clearfix">
       </div>

  </div><!-- END #header -->
 </div><!-- END #header_wrap -->
 
 
 
 <div id="header_wrap02">
  <div id="header" class="clearfix">

   <!-- logo -->
   <h1 id="logo_text"><a href="http://noahsark.tank.jp/">ノアズアーク　ホームページ制作</a></h1>
<h2 id="description">初期費用無料！月額費用のみ２万円。格安・激安ホームページ制作</h2>

   <!-- global menu -->
   <a href="#" class="menu_button">menu</a>
   <div id="global_menu" class="clearfix">
       </div>

  </div><!-- END #header -->
 </div><!-- END #header_wrap -->

<h1 id="logo_text"><a href="http://noahsark.tank.jp/">ノアズアーク　ホームページ制作</a></h1>

<h2 id="description">初期費用無料！月額費用のみ２万円。格安・激安ホームページ制作</h2>

</div>

</div>

</div>

<h1 id="logo_text"><a href="http://noahsark.tank.jp/">ノアズアーク　ホームページ制作</a></h1>

<h2 id="description">初期費用無料！月額費用のみ２万円。格安・激安ホームページ制作</h2>

</div>

</div>

</div>

①#header_wrap02のＣＳＳは以下を書き込む。上部固定のcss

#header_wrap02 {min-width:1260px; height:93px;
   /* ▼上端に固定するCSS */
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   background-color:#FFF;
   z-index:10;
   }

#header_wrap02 {min-width:1260px; height:93px;

/* ▼上端に固定するCSS */

position: fixed;

top: 0px;

left: 0px;

width: 100%;

background-color:#FFF;

z-index:10;

}

②jquery本体を読み込む
jsファイルにjquery-1.11.1.min.jsをいれたあと以下を書き込む

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.11.1.min.js<?php version_num(); ?>"></script>

1	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.11.1.min.js<?php version_num(); ?>"></script>

③上記書き込みより下に以下を書き込む
#header_wrap02は途中から表示したい要素にする。

<script type="text/javascript">
   // ページの読み込みが完了してから実行
   $(function() {
      // スクロール途中から表示したいメニューバーを指定
      var navBox = $("#header_wrap02");

      // メニューバーは初期状態では消しておく
      navBox.hide();

      // 表示を開始するスクロール量を設定(px)
      var TargetPos = 350;

      // スクロールされた際に実行
      $(window).scroll( function() {
         // 現在のスクロール位置を取得
         var ScrollPos = $(window).scrollTop();
         // 現在のスクロール位置と、目的のスクロール位置を比較
         if( ScrollPos > TargetPos ) {
            // 表示(フェイドイン)
            navBox.fadeIn();
         }
         else {
            // 非表示(フェイドアウト)
            navBox.fadeOut();
         }
      });
   });
</script>

// ページの読み込みが完了してから実行

$(function() {

// スクロール途中から表示したいメニューバーを指定

var navBox = $("#header_wrap02");

// メニューバーは初期状態では消しておく

navBox.hide();

// 表示を開始するスクロール量を設定(px)

var TargetPos = 350;

// スクロールされた際に実行

$(window).scroll( function() {

// 現在のスクロール位置を取得

var ScrollPos = $(window).scrollTop();

// 現在のスクロール位置と、目的のスクロール位置を比較

if( ScrollPos > TargetPos ) {

// 表示(フェイドイン)

navBox.fadeIn();

}

else {

// 非表示(フェイドアウト)

navBox.fadeOut();

}

});

</script>

④最後に#header_wrap02の中のa等の文字の装飾をcssで整える。

参考サイト
https://allabout.co.jp/gm/gc/449060/2/

単純にヘッダーを固定するなら以下でＯＫ！

header{
position:fixed;
top:0;
z-index:10;
}

header{

position:fixed;

top:0;

z-index:10;

}

« wordpress 基本タグ各種

フォトショップやイラレで使っているフォントを他のＰＣに引っ越す方法 »

スクロールすると画面上部に固定されたメニューバーが出現する方法

関連記事

スクロールすると画面上部に固定されたメニューバーが出現する方法　