下にスクロールすると隠れて上にスクロールしたら登場するヘッダJS（とCSS）

今作っているサイトでヘッダの動きをタイトルのようにしたくなったので調べてみたんだけど、既にあるライブラリは細かい挙動がどれも思っているのと微妙に違ったので結局自分で書く事にした。

デモ

欲しかった細かい挙動はこんなの

1. コンテンツを閲覧中、上にスクロールするとヘッダが上からニュッと登場する
2. 再度下にスクロールすると上にアニメーションして消える
3. ページの一番上からスクロールしはじめた時は、ヘッダはアニメーションで隠れるのではなく、 ページ上部に普通に配置されたまま、スクロールする要素の1つとして消えていく （medium.comやiOSのSafariのような挙動）
4. 動きとしては これ が一番理想に近いんだけど、スマホではjQueryのslideUp, slideDownを使っているので動きが気持ち悪かった。 cssのアニメーションで動かしたい
5. scroll-up-barはiOS用のバッドノウハウが入っているけどそれももういらならそう
6. スクロールイベントは頻繁に発火して重いので Underscore.js のthrottleなどを使用して無駄に何度も実行されないようにしたい

3と4追加したかったがために、ちょっとjsがややこしくなってしまった。 実装の中身は

• jsからはクラスの追加、削除を行うのみ

• アニメーションやヘッダの高さの設定などはcssで記載

というような感じで作っている。

ソースコードはあんまり綺麗じゃないけど こちら に上がっています。 リポジトリの方は記事と違って使い回しできるようにjQueryプラグインになってます。