jQueryで作る、『スティッキーヘッダー(Sticky header)』を紹介します。

スティッキーヘッダーは、シンプルjQueryで実装でき、スクロールしてもナビゲーションを見失いません。
ホームページをスッキリさせつつ、迷子知らず！

Windowのスクロールイベントによるクラスの脱着のみのシンプル構造。
特定の位置までスクロールしたらヘッダーにクラスをつけてCSSを変更します。

今回のデモでは、CSSにちょっぴりひと工夫。
ヘッダーメニューをパーセント表示にすることでレスポンシブ対応しています。

ぜひあなたのホームページにも、ナビゲーションが上部固定される『スティッキーヘッダー』を取り入れてみてくださいね！！

↓以下がコードサンプルになります。

▼jQuery

<script type="text/javascript">
$(function(){
	var _window = $(window),
		_header = $('.site-header'),
		helloBottom;
	
	_window.on('scroll',function(){		
		helloBottom = $('.hello').height();
		if(_window.scrollTop() > helloBottom){
			_header.addClass('fixed');   
		}
		else{
			_header.removeClass('fixed');   
		}
	});
	
	_window.trigger('scroll');
});
</script>

▼CSS

.site-header{
	background: #ffffff;
	display: flex;
	padding: 20px;
	position: absolute;
	justify-content: space-between;
	width: 100%;
}
.site-header.fixed{
	position: fixed;
	top: 0;
}
.content{
	line-height: 1.6;
	margin: 0 auto;
	padding-top: 100px;
	width: 800px;
}

@media screen and (max-width:750px) {
    .site-header{
        font-size: 80%;
    }
    .content{
        width: 90%;
    }
}

▼HTML

<div class="hello">
<img src="#" width="1600" height="1200" alt="hello">
</div>
    <header class="site-header fixed">
		<h1>
            <a href="#">Home</a>
        </h1>
		<nav class="gnav">
			<ul class="gnav_menu">
				<li class="gnav_menu_tag"><a href="#">News</a></li>
				<li class="gnav_menu_tag"><a href="#">About</a></li>
				<li class="gnav_menu_tag"><a href="#">Service</a></li>
				<li class="gnav_menu_tag"><a href="#">SNS</a></li>
				<li class="gnav_menu_tag"><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>	

今回、参考にさせていただいたのは、
ヘッダー・ナビゲーションを固定表示させるアイデア5つ – WEBDESIGNDAYさんの『Contents 3 途中から固定表示』のページです。
ありがとうございます。

デモページは、こちら