FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

jQueryでスクロールするとヘッダーを固定させる

   

最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。
よく使うのでメモがわりに掲載します。
基本は簡単なので覚えておけばいろいろ応用できるかと思います。

デモはこちら

仕組みは、<header>の高さ分(デモでは80px)スクロールすると<nav>にfixedクラスが追加されることで固定されます。

scrollのみだと、スクロールした状態で更新ボタンを押すと固定されないので、loadも追加しています。

 - jQuery