Cbslideheader NPM

#jquery.cb-slideheader.js

#概要

「jquery.cb-slideheader.js」は、ページのスクロールに合わせてヘッダーバーをスライドさせて表示/非表示させる機能を実装するためのjQueryプラグインです。

以下の2つのメソッドを提供します。

.cbSlideDownHeader()メソッド: ページを下にスクロールすると非表示になっていたヘッダーバーを表示させるメソッド
.cbSlideUpHeader()メソッド: ページを下にスクロールすると表示されているヘッダーバーを非表示にするメソッド

参考 http://mae.chab.in/archives/2703

English here http://www.jqueryscript.net/menu/jQuery-Plugin-To-Auto-Show-Hide-Site-Header-cb-slideheader-js.html

#デモ

スクロールするとヘッダーバーが表示されるサンプル http://jsrun.it/maechabin/1Odt

スクロールするとヘッダーバーが非表示となるサンプル http://jsrun.it/maechabin/zFoe

#実装方法

1. プラグインをダウンロードする

こちらのページからダウンロードするか、[git clone]コマンドでローカルにコピーします。

$ git clone git@github.com:maechabin/jquery.cb-slideheader.js.git 任意のディレクトリ名

npm経由でも入手可能です。

$ npm install --save cbslideheader

機能の実装に使用するファイルは以下のjsファイルとなります。

dist/jquery.cbslideheader.min.js

2. プラグイン & 外部ファイルを読み込む

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.cbslideheader.min.js"></script>

※当プラグインはCommonJSに対応しています。require()メソッドで読み込んでもOKです。

3. ヘッダーバーを準備する

プラグインを適用するヘッダーバーを準備します。ヘッダーバーの要素に対して「cb-header」というclass名をつけます。

<header class="cb-header header1">header1</header>

4. CSSを指定する

ヘッダーバーに付与したclass属性「cb-header」に対して、以下を指定します。ページを読み込んだ初期表示でヘッダーバーを非表示にしておきたい場合はvisibility: hidden;を指定しておきます。

.cb-header {
  position: fixed;
  left: 0;
  /*
    ページを読み込んだ初期表示でヘッダーバーを
    非表示にしておきたい場合は以下を指定
  */
  visibility: hidden;
}

5. プラグインを実行する

準備したヘッダーバーに対して、プラグインのメソッドを（ヘッダーバーより下の位置で）実行させます。

// スクロールしてヘッダーバーを表示させる場合
$(".header1").cbSlideDownHeader();

// スクロールしてヘッダーバーを隠す場合
$(".header1").cbSlideUpHeader();

＃プラグインのオプション

ヘッダーバーの表示/非表示に関するオプション

ヘッダーバーのスタイルに関するオプション

ヘッダーバーのアニメーションに関するオプション

コールバック関数に関するオプション

全画面表示に関するオプション

#実装事例

ヘッダーバーを2つ用意し、cbSlideDownHeader()メソッドとcbSlideDownHeader()メソッドで相互に見え隠れさせる http://jsrun.it/maechabin/kyhg

ページを下にスクールすると隠れ、上にスクロールすると現れるヘッダバー http://jsrun.it/maechabin/3EnZ

全画面表示（その1） http://jsrun.it/maechabin/kGYH

ヘッダーバーを複製し、全画面表示（その2） http://jsrun.it/maechabin/sgJz

コールバック関数を指定 http://jsrun.it/maechabin/4Sh1

#ライセンス

MIT license

#アップデート情報

ver. 0.3.8

headroomオプションがtureの場合でもslidePointオプションがで起用されるように修正

ver. 0.3.7

headerCloneオプションで複製されるヘッダーバーに"cb-header1"というclass名を付与するように対応

jquery-plugin

jquery

@infinitebrahmanuniverse/nolb-cb @everything-registry/sub-chunk-1300

9 years ago

10 years ago

10 years ago

10 years ago