FEVDES BLOG

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

jQuery

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

投稿日:

SPONSORED LINK

最近よくあるページがスクロールを始めるとヘッダーの位置が固定する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 scroll', function(){
		
		//ヘッダーの高さ分(80px)スクロールするとfixedクラスを追加
		if ($(window).scrollTop() > 80) {
			$('nav').addClass('fixed');
		} else {
			//80px以下だとfixedクラスを削除
			$('nav').removeClass('fixed');
		}
		
	});
	
});

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

-jQuery

執筆者:


  1. […] jQueryでスクロールするとヘッダーを固定させる  […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

デザイナーでもJavaScriptやjQueryが必ず上達する3つのコツ

SPONSORED LINK いまやJavascriptを使わないサイトはほぼないと思います。 WEBデザイナーもJavascript、せめてjQueryは使えないと 厳しい時代です。 JavaScr …

jQuery

jQueryで追加したstyle属性を全て削除する方法

SPONSORED LINK jQueryでアニメーションなどを行うとインライン要素でstyle属性が追加されますが全て削除したい場合は、 $(‘#area *’) *で#area内の全ての要素を取得 …

【新人向け】簡単にできた!Webサイトでよくみる技術のまとめ

SPONSORED LINK 4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そ …

写真をタイル状に並べてくれるjQuery「jMosaic」

SPONSORED LINK jMosaic 写真の高さなどを自動的にリサイズしてタイル状に並べてくれるjQuery「jMosaic」です。

ドロワーメニューの「simple-sidebar」の簡単なサンプル

SPONSORED LINK simple-sidebar スマホなどの、ドロワーメニューの追加で便利な「simple-sidebar」。 サンプル通りに作っても、つまづいたので、備忘録代わりに簡単な …

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。