前提・実現したいこと

下にスクロールした時に、
メイン画像を超えるとヘッダーが出てきて固定させたいです。

発生している問題・エラーメッセージ

様々な方法を試しましたが、
下についてきません。

エラーメッセージ

該当のソースコード

ソースコード

試したこと

・.headにposition:fixed;をつける
・javascriptで.fixedをスクロールの高さで追加

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

html

<body> <header class="head"> <section class="head-inner"> <h1 class="head-logo"><a href="index.html"><img src="asset/img/logo.png" alt=""></a></h1> <div class="head-btn"><a href="https://ir-inc.net/contact/" target="_blank">ENTRY</a></div> </section> </header> <div class="top"> <section class="main"> <h2 class="main-tit"><img src="asset/img/main.jpg" alt="僕は、アイアールが大好きだ。"></h2> <p class="sub-tit">日本一社員に『愛がある』会社</p> <p class="sub-txt">今、建設業界で未経験転職の支持率No.1の『アイアール』を徹底解剖！！</p> </section>

css
base.css

a, address, article, aside, audio, b, big, blockquote, body, button, caption, center, cite, code, dd, details, div, dl, dt, em, fieldset, figcaption, figure, footer, form, form, h1, h2, h3, h4, h5, h6, header, i, iframe, img, input, label, li, main, mark, menu, nav, ol, p, pre, q, s, section, select, small, span, strong, summary, table, tbody, td, textarea, tfoot, th, thead, time, tr, u, ul, video {
margin: 0;
padding: 0;
font-size: inherit;
box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}

page.css

.head-inner {
display: flex;
justify-content: space-around;
text-align: center;
align-items: center;
}
.head-inner .fixed {
position: fixed; /fixedを設定して固定/
z-index: 999; /最前面へ/
top: 0; /位置指定/
left: 0; /位置指定/
}
.head-logo {
margin: 10px 0;
}
.head-btn a {
text-decoration: none;
color: #fff;
text-align: center;
font-size: 1.8rem;
display: block;
background-color: #ff0000;
padding: 15px 40px;
font-weight: bold;
}

//スクロールすると上部に固定させるための設定を関数でまとめる
function FixedAnime() {
var headerH = $('.head-inner').outerHeight(true);
var scroll = $(window).scrollTop();
if (scroll >= headerH){//headerの高さ以上になったら
$('.head-inner').addClass('fixed');//fixedというクラス名を付与
}else{//それ以外は
$('.head-inner').removeClass('fixed');//fixedというクラス名を除去
}
}