WebDesign Dackel

スクロールに応じてヘッダーを隠すjQueryプラグインを作ってみました

jquery.coolfixed

Hatena0
Google+0
Pocket0
Feedly0

タイトル通り、スクロールをするとある地点でヘッダーを隠すjquery.coolfixedなるプラグインを作ってみました。
というよりもこのサイトで使っているそのものです。
とりあえずデモを用意しました。

DEMO

ヘッダーに以下の様な指定をします。

#header {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
}

header内にjqueryと、今回のプラグインを読み込む

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

プラグインの設定は以下で設定

$("#header").coolfixed({
        dulay: 120,//アニメーション速度
        easing: "swing", //アニメーションイージング
        displayHeight: 5, //隠れた際に残す表示領域
        show: function(){ //ヘッダーが表示された際のコールバック関数
            $("#info").text("show");
        },
        hide: function(){ //ヘッダーが非表示になった際のコールバック関数
            $("#info").text("hide");
        }
    });

完全オレオレ仕様です。

対応しているブラウザは

  • IE7〜10
  • Chrome (バージョン不明)
  • Firefox
  • Safari

ダウンロードは以下。

Download

jQuery最近まじめに勉強しようと思って作ってみましたが、かなり楽しい!
もっと色んなもの、楽しいものを作ってみたいです。

Hatena0
Google+0
Pocket0
Feedly0

Recent Posts

Comments

  • satoh

    May 26, 2014

    こんにちは、突然失礼します。
    この動きをやりたくてシンプルなサンプルを探してこちらに辿り着きました。
    ていねいな解説ありがとうございます。
    使わせていただきたいと思ったのですが、
    表示を逆に、つまり、
    最初は非表示でスクロールすると出てくるようにしたいのですが
    その場合どうしたらよいでしょうか?
    お時間あるときに返信いただけると幸いです。

    返信

    • dackel

      Jun 06, 2014

      satohさん
      コメントありがとうございます。
      返信が遅くなってしまい申し訳ありません。。

      最初は非表示でスクロールすると出てくるようにしたいのですが
      その場合どうしたらよいでしょうか?
      上記の動きをするためには、DEMOを例にすると、#headerのtopをtop:-50px; で上に隠しておいて、プラグインのオプションである「displayHeight」に#headerの高さ分50を指定する事で実現出来ます。

      実際の指定は下記の様な感じになるかと思います。

      #header {
          width: 100%;
          height: 50px;
          position: fixed;
          top: -50px;
          left: 0;
          }
      
      $("#header").coolfixed({
          displayHeight: 50
      });
      

      結構前に作ったものなので、動作が心配ですが使ってみてフィードバックを頂ければ改善をしたいなぁと思いますのでぜひぜひよろしくお願いします!

  • erueru

    Jan 20, 2015

    はじめまして、突然の質問失礼します!

    ちょっとアレンジを加えたくて躓いてるのですが

    アニメーション①がおわってから、アニメーション②を実行するには
    どのような書き方をすれば良いでしょうか…?

    今やっていることは最初メニュー(大)が表示されていて
    一定スクロールしたら、メニュー(大)がtop:0 で隠れて
    メニュー(小)が現れるというアニメーションです。

    また、上にもどったときにその逆のアニメーションを付けたく奮闘しています…

    分かりにくい初心者な説明ですみません、お助け願います…。

    返信

    • dackel

      Jan 21, 2015

      erueruさんはじめまして。コメントありがとうございます!

      アニメーションのアレンジについてですが、サンプルを作ってみました。
      サンプル2
      希望するようなアニメーションかどうか、私の解釈が間違っていたらすいません…。

      アニメーションの方法は、サンプルのHTMLにざっとコメントアウトで書いています。
      あまりチェックは出来ていないのですが、参考になればと思います。

  • erueru

    Jan 23, 2015

    dackelさん

    もうまさにこのアニメーションです!
    是非是非参考にさせていただきますm(_  _` )m
    jsを触りたてでまだまだ未熟なもので、すごく助かりました…!
    今後の手引きなどで活用させて貰いたいので、コピペで保管させていただいてもいいでしょうか?
    本当にありがとうございました!

    返信

    • dackel

      Jan 24, 2015

      erueru さん
      ご希望のアニメーションに近いものでよかったです。

      今後の手引きなどで活用させて貰いたいので、コピペで保管させていただいてもいいでしょうか?

      こちら問題ありませんので、ご自由にお使い下さい。
      今後とも当ブログをよろしくお願いします!

メールアドレスが公開されることはありません。お気軽にコメントどうぞ。