jQuery: ページをスクロールすると途中でスライドダウンするfixedなグローバルナビの例

初期状態で設置されているグローバルナビがスクロールで見えなくなると、別のグローバルナビがページの上部にfixedで固定される、という表示を目指します。
jQueryの.slideDown()、.slideUp()を使えば簡単に作れます。

• デモ: https://sutara79.github.io/demo-globalnavi-thin/demo2/
• ソースコード: https://github.com/sutara79/demo-globalnavi-thin/tree/master/demo2

しかし、これをslideDownではなく、別の動きにしてほしいと頼まれました。
.slideDown()は要素の高さが徐々に元に戻るという動作で表現されていますが、そうではなく、元のサイズの要素がそのまま上から下りてくるという動作で表現してほしいとのこと。
両者の違いは、下の記事が分かりやすいです。

• 参考: jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法: 小粋空間

そこで、.animate()を使って実現しました。

• デモ: https://sutara79.github.io/demo-globalnavi-thin/demo1/
• ソースコード: https://github.com/sutara79/demo-globalnavi-thin/tree/master/demo1

スライドダウンとスライドアップの2種類の動作のうち、同じ動作が連続して実行されるのを防ぐため、前回の動作を記憶するようにしています。
また、逆の動作の場合にすぐに動きが切り替わるよう、.stop()を使って以前の動作を取り消すようにしています。