jQueryでヘッダーを固定したときのアンカーリンクのずれを修正します。CSSで:rootにscroll-padding-topを書くのとほとんど同じですが、ヘッダーの値が可変の場合にはjQueryが便利かな、と思いました。

jQuery

セレクタには:rootの代わりにhtmlと書いています

var navHeight = jQuery( '.anchorLink' ).outerHeight(); // グローバルメニューの高さ
var gheadHeight = jQuery( '#ghead' ).outerHeight(); // グローバルヘッドの高さ
var navPos = jQuery( '.anchorLink' ).offset().top - gheadHeight; // グローバルメニューの位置
var scrollPtop = navHeight + gheadHeight; //scroll-padding-topの値を算出
jQuery( window ).on( 'scroll', function() {
		jQuery( 'html' ).css( 'scroll-padding-top', scrollPtop );
});
jQuery( window ).on( 'scroll', function() {
	if ( jQuery( this ).scrollTop() > navPos ) {
		jQuery( '.anchorLink' ).css( 'top', gheadHeight );
		jQuery( '.anchorLink' ).addClass( 'fixed' );
	} else {
		jQuery( '.anchorLink' ).css( 'top', 0 );
		jQuery( '.anchorLink' ).removeClass( 'fixed' );
	}
});