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

jQuery

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

var navHeight = jQuery( '#gNavi' ).outerHeight(); // グローバルメニューの高さ
var headerHeight = jQuery( '#header' ).outerHeight(); // グローバルヘッドの高さ
var navPos = jQuery( '#gNavi' ).offset().top - headerHeight; // グローバルメニューの位置
var scrollPtop = navHeight + headerHeight; //scroll-padding-topの値を算出
jQuery( window ).on( 'scroll', function() {
		jQuery( 'html' ).css( 'scroll-padding-top', scrollPtop );
});