簡単にヘッダー固定の追尾型ナビゲーションを実装できるjQueryプラグイン「Clingify」

簡単にヘッダー固定の追尾型ナビゲーションを実装できるjQueryプラグイン「Clingify」

簡単にヘッダー固定の追尾型ナビゲーションを実装できるjQueryプラグイン「Clingify」

Clingifyは、ヘッダーに固定されたスクロール追尾型のナビゲーションを実装することができるjQueryプラグインです。最近よく見かけますね。

デモは、以下のページで確認できます。下にスクロールしていくと、ヘッダー部分に固定のナビゲーションが出現します。

デモページを見る

当記事では、Clingifyの使い方について解説いたします。

ステップ1. Clingifyのダウンロードと設置

まずは、GitHubからClingifyのファイルをダウンロードします。ダウンロードしたclingify-master.zipを解凍し、以下のファイルをサーバーにアップロードします。

  • clingify.css
  • jquery.clingify.js

ステップ2. jQueryとファイルの読み込み

サーバーにアップロードしたファイルとjQueryを読み込みます。


<html>
<head>
<link rel="stylesheet" href="/css/clingfy.css" />
</head>
<body>
...
page content
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.clingify.js"></script>
</body>
</html>

ファイルパスは適宜変更してください。

ステップ3. スクリプトの実行

</body>の直前でスクリプトを実行します。


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

「$(‘.some-selector’).clingify();」のsome-selectorは、ナビゲーションのクラスやIDを指定しています。この部分を自サイトのナビゲーションのクラスもしくはIDに変更してください。

コードの全体像としては、以下のような感じです。


<html>
<head>
<link rel="stylesheet" href="/css/clingfy.css" />
</head>
<body>
...
page content
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.clingify.js"></script>
<script type="text/javascript">
$(function() {
$('.some-selector').clingify();
});
</script>
</body>
</html>

これだけでClingifyの実装は完了です。

あとがき

驚くほど簡単に、スクロール追尾型の固定ナビゲーションが実装できます。

ヘッダー固定のナビゲーションを実装する方法は色々とありますが、サクッと設置したい場合はぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です