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

最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモはこちら 仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。 header { width: 100%; height: 80px; color: #333; background: #EEE; } nav { width: 100%; color: #FFF; background: #333; } nav.fixed { position: fixed; left: 0; top: 0; } $(function() { //ロード or スクロールされると実行 $(window).on('load scrol

[ricopinx]

ヘッダーだけじゃなくて要素でもできた！

[tamlunch]

固定メニュー

[otchy210]

もしレスポンシブデザインの場合は、80px を動的に取得する仕組みと、onresize も追加で。