途中から固定ヘッダーになる場合のアンカーリンクのずれを解消したい

一定量スクロールしたらヘッダーが固定されるようにしてます。
その場合の、アンカーリンクのズレの解消方法が解らなくて困っています。

一定量スクロールでヘッダー固定の記述

$(function(){
var windowWidth = $(window).width();
var windowSm = 767;
if (windowWidth > windowSm) {
    //横幅767px超のとき（タブレット、PC）に行う処理を書く
	var _window = $(window),
		_header = $('header'),
		heroBottom;
	
	_window.on('scroll',function(){
		heroBottom = 500;
		if(_window.scrollTop() > heroBottom){
			_header.addClass('fix');   
		}
		else{
			_header.removeClass('fix');   
		}
	})
	_window.trigger('scroll');
} else {
//横幅767px以下のとき（つまりスマホ時）に行う処理を書く
$(function(){
    if(window.innerWidth < 767){
            $('header').removeClass('fix');
            }else {
            }
});
}	
});

アンカーリンクのズレ解消用記述

**別ページのアンカーリンクへスムーズスクロールで移動しつつ、fixedナビの高さ分を自動でマイナスもするjQueryコード – 0017 **
https://0017.org/1789.html

こちらのサイトを参考にさせていただいたところ
他ページからのアンカーリンクはズレずに表示されるのですが、
同じページからのアンカーリンクの場合ズレてしまいます。

$(function() {
var headerHeight = $('header').outerHeight();   //fixedのヘッダーの高さを取得
var urlHash = location.hash;    //URLハッシュを取得
var animeSpeed = 500;   //スクロールのアニメーションスピード
if(urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        var target = $(urlHash);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);
    }, 100);
}
$('a[href^="#"]').on({
    'click': function(){
        var href= $(this).attr("href");
        var target = $(href);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);   
    }
});
});

変更した内容

$(function() {

if ($('header').css('position') !== 'fixed') {
		headerHeight += headerHeight;
	}
	
var headerHeight = $('header').outerHeight();   //fixedのヘッダーの高さを取得
var urlHash = location.hash;    //URLハッシュを取得
var animeSpeed = 500;   //スクロールのアニメーションスピード
if(urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        var target = $(urlHash);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);
    }, 100);
}
$('a[href^="#"]').on({
    'click': function(){
        var href= $(this).attr("href");
        var target = $(href);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);   
    }
});
});

**JavaScript - javascript、offset().topの値が、固定ヘッダーの前と後でずれてしまう｜teratail **https://teratail.com/questions/182348
こちらを見て途中から固定になるのが原因だと思って、
こちらを参考にさせていただき、書き直してみましたが変わりませんでした。

teratailの質問されていた記述を下記のようにして試してみたところ
アンカーリンクのズレはなくなったのですが、固定ヘッダーが効かなくなってしまいました。

$(function () {
	if ($('header').css('position') !== 'fixed') {
            headerHeight += headerHeight;
        }
    $('a[href^="#"]').click(function () {
        //ヘッダーの高さを取得
        var headerHeight = $('.scroll-header').height();
        console.log(headerHeight);
        //アンカーの値取得
        var href = $(this).attr("href");
        //移動先ターゲットを取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        console.log(target);
        //ターゲットの座標を取得
        var target_offset = target.offset().top;    
        console.log(target_offset);
        var position = target.offset().top - headerHeight; //ヘッダの高さ分位置をずらす
        $("html, body").animate({ scrollTop: position }, 400, "swing");
        return false;
    });
});

全くの初心者のため、自分では解決出来そうにありません。
どなたかご教授いただけないでしょうか。
よろしくお願いいたします。