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

サイト構築 -JavaScript

Post on:2013年7月23日

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);
        }
    });
});