《jQuery》ウィンドウの一番上までくるとFix固定するナビゲーション

公開日：2023年09月14日　最終更新日：2024年2月27日

jQuery

ナビゲーションがウィンドウの一番上まで来るとclass=”fixed”が付与されます。

DEMO

position: fixed;を使用しているため、別ページにDEMOを用意しました。

DEMOを確認する

HTML

<div>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</div>
<div class="nav">一番上までくるとFix固定するナビゲーション</div>
<div class="content">コンテンツここまで</div>

CSS

スクロール時の動作をわかりやすくするための装飾です。
好きにアレンジしてください。

.nav {
	background: #111;
	color: #fff;
	padding: 10px;
	width: 100%;
}
.fixed {
	background: rgba(17,17,17,.9);
	position: fixed;
	top: 0;
}
.content {
	margin-top: 2000px;
}

JS

JSの記述の前にjQueryの読み込みが必要です。

jQuery(function($){
	nav = $('.nav');
	navOffset = nav.offset();

	$(window).scroll(function () {
		 if($(window).scrollTop() > navOffset.top) {
		nav.addClass('fixed'); 
		}else {
		nav.removeClass('fixed');
		}
	}); 
);