スクロールで固定ヘッダーにするサンプルコード

misa
2022年12月26日
3:10 PM
0件のコメント

HanamiWEBオンラインスクールでは

●バーチャル自習室でのリアルタイム質問！

●チャットで質問し放題！

●24時間学び放題のEラーニング教材！

全部ついて 2,500円/月！

30日間お試し登録！

スクロールするとヘッダーが固定される固定ヘッダーのhtml/css/jsを使った実装方法備忘録

固定ヘッダーの作る方概要

固定したいパーツにIDを付ける（ClassでもOK）
jQueryでスクロールしたら特定のクラスを追加
追加された特定のクラスをfixで一固定、デザイン調整する

この流れで出来ます。

ヘッダーのHTMLコード

例えばこのようにグローバルメニューを囲うDIVにID【header】をつけます

<div id="header">
  <div class="global-nav">
    <nav class="header-nav">
      <ul class="nav">
        <li><a href="index.html">HOME</a></li>
	<li><a href="news.html">ニュース</a></li>
	<li><a href="guidance">代表挨拶</a></li>
	<li><a href="facility">施設案内</a></li>
	<li><a href="access">MAP&アクセス</a></li>
      </ul>
      </nav>
  </div>
</div>

固定ヘッダーにするjQueryコード

ヘッダーに付けたID【header】にjQueryで

TOPから50pxスクロールされたら
【.is-fixed】クラスを追加
TOPから50pxスクロールされていない状態の場合
【is-fixed】クラスを削除

という指示を出します。

common.jsなど、別ファイルに保存します。

$(window).bind('scroll', function(){		
  if($(this).scrollTop() > 50) {
    $('#header').addClass('is-fixed');
  }else{
    $('#header').removeClass('is-fixed');
   }
});

CSSの設定方法

スクロールされた時とされていない時のヘッダーのクラスの変化を紹介します。

スクロールされていない時のHTML

<div id="header">
  <div class="global-nav">
    <nav class="header-nav">
      <ul class="nav">
        <li><a href="index.html">HOME</a></li>
	<li><a href="news.html">ニュース</a></li>
	<li><a href="guidance">代表挨拶</a></li>
	<li><a href="facility">施設案内</a></li>
	<li><a href="access">MAP&アクセス</a></li>
      </ul>
      </nav>
  </div>
</div>

スクロールされた時のHTML

【header】IDのついているDIVに【is-fixed】クラスが追加されます

<div id="header" class="is-fixed">
  <div class="global-nav">
    <nav class="header-nav">
      <ul class="nav">
        <li><a href="index.html">HOME</a></li>
	<li><a href="news.html">ニュース</a></li>
	<li><a href="guidance">代表挨拶</a></li>
	<li><a href="facility">施設案内</a></li>
	<li><a href="access">MAP&アクセス</a></li>
      </ul>
      </nav>
  </div>
</div>

固定ヘッダーCSSのコード例

CSSは【is-fixed】というクラスに対してデザインを追加したりすればよいです。固定ヘッダーにしたい場合は【position:fixed】を追加して、固定にしてあげます。

最初からグローバルメニューは【position:fixed】で固定にしておき、スクロールした時だけ背景の色を変えるなどデザインを少し変えて固定されたように見せてもOKです。

.is-fixed .global-nav {
    position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    padding: 0 20px 5px 5%;
}

HTMLとの紐づけ方

index.html　ー　ヘッダーのコードが書かれたHTMLファイル
style.css　ー　CSSコードが書かれているCSSファイル
common.js　ー　JSが書かれたファイル

この２種類のファイルがあったとします。index.htmlの<head>内に以下を追加します。

外部style.cssの読み込みコード
jQueryライブラリー読み込みコード
外部ファイルであるcommon.jsの読み込みコード

です。

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="common.js"></script>