[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify

サイト構築 -JavaScript

Post on:2013年7月23日

sponsorsr

ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。

Clingify
Clingify -GitHub

Clingifyのデモ
Clingifyの使い方

Clingifyのデモ

スクリプトのページ自体がデモページになっています。

デモページ

スクロール無しの状態では、ヘッダは上にマージンをとって配置されています。

スクロール、もしくは、ナビゲーションをクリックしてみます。

デモページ：Purpose

スクロールすると、ヘッダは形状を変えて上部にぺたっと貼りつきます。

更にスクロールしてみます。

デモページ：Optionsからちょい下にスクロール

かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。

Clingifyの使い方

Step 1: 外部ファイル

</body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。

<body>
  ...
  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="/js/jquery.clingify.js"></script> 
</body>

Step 2: HTML

スクロールしても上部に固定配置にする要素をheader要素などで配置します。

<header class="first-clingy">
  <h1 class="title">見出し</h1>
  <nav class="nav-persistent">
    <ul>
      <li>アイテム</li>
      <li>アイテム</li>
      <li>アイテム</li>
      <li>アイテム</li>
    </ul>
  </nav>
</header>

ある程度スクロールした時に要素を変更する際は、ページの適切な位置にdiv要素などを使って配置します。

<div class="second-clingy">
  <p>ある程度スクロールした時に表示</p>
</div>

Step 3: JavaScript

まずはヘッダだけを上部に固定する時は、下記のように記述します。

<script type="text/javascript">
$(function() {
    $('.first-clingy').clingify();
});
</script>

ある程度スクロールした時に固定表示する時は、ブレイクポイントを設定します。

$('.second-selector').clingify({
    breakpoint: 0,  // ブレイクポイント（ピクセル）
    extraClass: '',
    throttle: 100,
    
    // Callback functions:
    detached: $.noop,
    locked: $.noop,
    resized: $.noop
});

レスポンシブ対応としてナビゲーションの幅をコンテンツに揃えるようにするには、下記のように記述します。

$(function() {
    var $clingifyTarget = $('.some-selector'),
        $parent = $('.some-fluid-width-parent-container'),
        matchWidths = function($elem) {
            $elem.width($parent.width());
        };

    $clingifyTarget.clingify({
        locked : function() {
            matchWidths($clingifyTarget);
        },
        resized : function() {
            matchWidths($clingifyTarget);
        }
    });
});