ヘッダー要素が画面外に出たらヘッダー要素を固定、画面内に入ってきたら元に戻す動作を実装したときのメモ。
こちらのサイトで紹介されていた方法で実装しました。

[jQuery] スクロールして、要素が画面内に入ったか・出たかを判定する

HTMLの要素はこんな感じ

<header>
<div class="header-contents">
<div class="container">
<!-- ここは要素 -->
</div><!--/.container-->
</div><!--/.header-contents-->
</header>

jQueryですが、モバイルデバイスでこの動作は不要ということで、PC以外では動作しないようにしています。
クラスheader-fixにはposition:fixed;が設定してあるので、画面外に出たらheader-contents内の要素は固定化され、画面内に戻ってきたら固定化が解除されます。

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
//PC以外は無効
if(!navigator.userAgent.match(/(iPhone|iPad|Android|Mobile)/)){
$(function(){
var scroll;
var objH = $('header').outerHeight();
var objTop = $('header').offset().top;
var objBottom = objTop + objH;
$(window).on('scroll', function(){
scroll = $(window).scrollTop();
if(scroll >= objBottom){
//要素が画面外に出たら処理
$('.header-contents').addClass('header-fix');    
} else {
//要素が画面内に入ってきたら処理
$('.header-contents').removeClass('header-fix');    
}
});
});
}
</script>

今回もとりあえず要件は満たしたのでこれでよしとします。