デモページはこちら

PC表示の場合、ページの途中に配置したナビゲーションが画面の一番上に来たタイミングで固定され、スクロールに追従する動作を実装します。

ナビゲーション部分のhtmlは以下の通りです。

<nav class="sticky_nav">
	<ul>
		<li><a href="#">メニュー01</a></li>
		<li><a href="#">メニュー02</a></li>
		<li><a href="#">メニュー03</a></li>
		<li><a href="#">メニュー04</a></li>
		<li><a href="#page01">ページ内リンク</a></li>
	</ul>
</nav>

以下のCSSを設定します。ポイントはposition: absolute;で配置し、カスタムデータ属性が付与されたタイミングでposition: fixed;に変更します。また同タイミングでtop: 0;を指定します。

.sticky_nav {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 80px;
	background: #fff;
}
.sticky_nav[data-sticky='true'] {
	position: fixed;
	top: 0;
	left: 0;
}
@media screen and (max-width:768px) {
	.sticky_nav {
		display: none;
	}
}
.sticky_nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	justify-content: center;
}
.sticky_nav ul li {
	padding: 0 20px;
	font-weight: bold;
}

以下jQueryのコードです。windowのload、resize、scroll時の動作です。ナビゲーションのY座標位置とスクロール量を比較して、スクロール量の方が大きくなった時にナビゲーションにカスタムデータ属性を付与、そうでない場合はカスタムデータ属性を削除します。つまりナビゲーションが画面の一番上に来たタイミングでカスタムデータ属性を付与します。

function gnavSticky() {
	var gnav = $('.sticky_nav');
	var gnavPos = gnav.offset().top;
	$(window).on('load resize scroll', function() {
		var scrollPos = $(this).scrollTop();
		if (scrollPos > gnavPos) {
			gnav.attr('data-sticky', 'true');
		} else {
			gnav.removeAttr('data-sticky');
		}
	})
}
gnavSticky();