メインビジュアルの下などに配置したグロナビ（メニューなど）がスクロールでブラウザ画面の上部に来た時に、画面トップで固定表示に変更する方法をメモ。

HTMLはベーシックなものを。

<header id="header">ロゴ</header>
<main>
<div id="mv><img src="/images/mv.png" alt="" /></div>
<nav id="gNavi">
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul></nav>

</main>

スクロールに応じて、グロナビにクラス名「fixed」を追加して、fixedの時は、position:fixedにするよ、と。

#gNavi{
display: flex;
width: 100%;
}
#gNavi.fixed{
position:fixed;
top:0;
left:0;
right:0;
}

jQueryはグロナビの位置までスクロールしたら、クラス名を追加・削除しますよ、というもの。

var navPos = jQuery( '#gNavi' ).offset().top; // グローバルメニューの位置
$(window).on( 'scroll', function() {
	if ( $( this ).scrollTop() > navPos ) {
		$( '#gNavi' ).addClass( 'fixed' );
	} else {
		$( '#gNavi' ).removeClass( 'fixed' );
	}
});

こちらのjQueryはヘッダーが固定で、グロナビをヘッダーの次に固定する場合。fixedするときのtopの値をヘッダーの高さにすることで、cssで値に悩まないで済みます。

var headerHeight = jQuery( '#header' ).outerHeight(); // ヘッダーの高さ
var navPos = jQuery( '#gNavi' ).offset().top - headerHeight; // グローバルメニューの位置
$(window).on( 'scroll', function() {
	if ( $( this ).scrollTop() > navPos ) {
		$( '#gNavi' ).css( 'top', headerHeight );
		$( '#gNavi' ).addClass( 'fixed' );
	} else {
		$( '#gNavi' ).css( 'top', 0 );
		$( '#gNavi' ).removeClass( 'fixed' );
	}
});