Headroom.jsを使用して自動非表示スティッキヘッダーを作成する

自動非表示ヘッダ かなり以前からWebデザインで着実に人気がありました。多くのブログやオンラインマガジンはスティッキヘッダを使用して ユーザーを惹きつける そして ナビゲーションに直接アクセスできるようにする.

媒体は持っています この機能を再定義 基本的な概念は ナビゲーションを隠します しながら 下にスクロール しかし それを示しています しながら 上にスクロール. このコンセプトは 大流行のトレンド そして今、あなたは簡単にできます それを複製する 使う Headroom.js.

Headroom.jsは 無料のバニラJavaScriptライブラリ 依存関係や過度のAPI機能はありません。あなたはそれをあなたのHTMLに追加し、ページヘッダをターゲットにしてそれを実行させるだけです。.

単純にヘッドルーム アニメーション化する特定のCSSクラスを追加および削除します。 のために ヘッダーを表示/隠す JavaScriptを使用して動きを検出する.

あなたはこの機能を自分で作ることができますが、なぜ迷惑なのですか？ヘッドルームはテスト済みです すべての主要ブラウザをサポート. それさえ jQueryやZeptoでうまく遊ぶ あなたのサイトにすでにJSライブラリがインストールされている場合.

あなたは見つけるでしょう たくさんのコードサンプル GitHubレポジトリには 簡単な例 それをターゲットに ＃ヘッダ 素子：

 var myElement = document.querySelector（ "＃header"）; // #header要素を渡してHeadroomオブジェクトを作成します。var headroom = new Headroom（myElement）; //ライブラリを初期化します。headroom.init（）; 

の その中に（） 機能は持っています カスタマイズするたくさんのオプション. あなたは別のをカスタマイズすることができます 要素クラス, と一緒に イベントトリガコールバック どこのことができます 自分の機能を埋め込む. たとえば、ピンの固定が解除された後に要素をフェードインさせたい場合は、 onUnpin 折り返し電話.

これらのオプションはすべてです メインプラグインページにリストされている, それでそれをチェックして、あなたがどう思うかを見てください。見たいなら 実際のヘッドルーム その下にあるペンを見てください メインデモページの完全クローン.