スクロールの途中からメニューを上に固定して表示

Webデザイン

スクロールしても画面からメニューが見えなくならないように上に固定する方法です。

デモページはこちら

ソースコード

HTML

<!-- ======== header ======== -->
<header>
	<div class="container header-container">
		<h1 class="header-h1">スクロールの途中からメニューを上に固定して表示</h1>
	</div>
</header>
<!-- ======== /header ======== -->
<!-- ======== nav ======== -->
<nav>
	<ul id="nav">
		<li><a href="#">メニュー</a></li>
		<li><a href="#">メニュー</a></li>
		<li><a href="#">メニュー</a></li>
		<li><a href="#">メニュー</a></li>
		<li><a href="#">メニュー</a></li>
	</ul>
</nav>
<!-- ======== /nav ======== -->
<!-- ======== main ======== -->
<div class="main">
	<div class="container">
		<main>
			<h1>メインコンテンツです</h1>
		</main>
	</div>
</div>
<!-- ======== /main ======== -->

CSS

nav {
	position: absolute;
	width: 100%;
	background: #333;
}
#nav {
	display: flex;
	list-style: none;
	max-width: 800px;
	margin: 0 auto;
}
#nav li {
	flex: 1 0 auto;	
}
#nav a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #fff;
	padding: 15px 20px;
}
#nav a:hover {
	background: #666;
}
.main {
	background: #ffc;
}
main {
	max-width: 800px;
	margin: 0 auto;
	height: 1000px;
	padding: 100px 20px 0;
}
h1 {
	text-align: center;
}
.fixed {
	position: fixed;
	top: 0;
}

JavaScript

$(function(){
	
	//スクロールしたらイベント発生
	$(window).on('scroll', function(){
		//スクロールの値がヘッダーの高さを超えたらnavにfixedクラスを追加して固定
		if($(window).scrollTop() > $('header').height()){
			$('nav').addClass('fixed');
		}else{
			$('nav').removeClass('fixed');
		}
	});	
	//ページを読み込んだらスクロールイベントを実行させる
	$(window).trigger('scroll');

});

簡単な解説

HTMLとCSSでメニューを作ります。
今回はメニューの上にヘッダーがあるので、この高さのぶんスクロールしたらメニューが固定されるようにします。
そのためにまずはCSSで下準備。

CSSでの設定

メニューの固定はnav要素のpositionをfixedにすればできます。
今回はfixedというクラスを用意し、それをnav要素に追加することでfixedにするので、そのための記述をします。
また、nav要素のpositionをabsoluteにしていますが、これはnav要素をfixedにしたときにあとに続く要素がnav要素の高さぶん上に移動してしまわないように、あらかじめnav要素の高さを無視させるため記述しています。

nav {
	position: absolute;
	width: 100%;
	background: #333;
}
/* 中略 */
.fixed {
	position: fixed;
	top: 0;
}

これでCSS側の準備は整いました。
あとはスクロールに合わせてfixedクラスを追加したり削除したりする処理をjQueryに記述します。

スクロールに合わせてクラスを追加・削除する

今回はheader要素の真下にnav要素があるので、nav要素はheader要素の高さぶんスクロールしたら画面の一番上にきます。
なのでheader要素の高さをheight()で取得して、スクロールの値がそれよりも大きいか小さいかでfixedクラスの追加と削除を行います。

//スクロールしたらイベント発生
$(window).on('scroll', function(){
	//スクロールの値がヘッダーの高さを超えたらnavにfixedクラスを追加して固定
	if($(window).scrollTop() > $('header').height()){
		$('nav').addClass('fixed');
	}else{
		$('nav').removeClass('fixed');
	}
});	

これでメニューが固定されるようになりますが、この処理はスクロールしたときにしか実行されません。
これでは読み込んだ時点で表示位置がズレていたとき、スクロールするまでメニューが固定表示されません。
そこで読み込み時にスクロールイベントを実行させて、処理を行います。

//ページを読み込んだらスクロールイベントを実行させる
$(window).trigger('scroll');

おわりに

今回は固定させるだけでしたが、小さくしたり半透明にしたりいろいろできるのでページが見やすくなるよう工夫してみたらいいかもしれません。
それでは。

コメント