スクロールするとふわっとヘッダーがでてくるjsを実装したい

Question

前提・実現したいこと

スクロールするとヘッダーがふわっとでてくるjsを実装したいです。
このページです

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

jsは動いているようで、ふわっと表示させたいヘッダー部分は最初display:none;
で表示されていないです。
検証ツールで見てみると、jsが動いているようにdisplay:none;
が適用されたり外されたりします。
しかし、スクロールしても該当のヘッダー部分が表示されません。

該当のソースコード

$(function () {
    var tel = $('#header-scroll');
    tel.hide();
    //スクロールが500に達したら表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            tel.fadeIn();
        } else {
            tel.fadeOut();
        }
    });
})

<header class="pc position-relative">
			<img src="img/index/header.png" class="main" alt="" />
			<div class="header-scroll flex" id="header-scroll">
				<p class="header-scroll-logo">
					<img src="img/index/header-scroll-logo-8.png" srcset="img/index/header-scroll-logo-8.png 1x,img/index/[e-mail] 2x" alt="まじま眼科">
				</p>
				<ul class="flex">
					<li>
						<a href="index.html">
							トップ
							<span>TOP</span>
						</a>
					</li>
					<li>
						<a href="about.html">
							当院について
							<span>ABOUT</span>
						</a>
					</li>
					<li>
						<a href="case.html">
							よくある症状
							<span>CASE</span>
						</a>
					</li>
					<li>
						<a href="index.html#schedule">
							診療時間のご案内
							<span>SCHEDULE</span>
						</a>
					</li>
					<li>
						<a href="about.html#access">
							アクセス
							<span>ACCESS</span>
						</a>
					</li>
				</ul>
				<a href="https://majima.mdja.jp"><img src="img/common/link.jpg" class="link" alt="web予約" /></a>
				<img src="img/common/tel.jpg" class="tel" alt="tel" />
			</div>
		</header>
		

試したこと

z-indexで隠れているのかと思い、１００００を指定してみましたが、表示されません。

どうしたら表示されるか、わかる方いらっしゃいましたら教えてください。よろしくお願いします。

Answer 1

.header-scrollのposition:absolute;となっているところをposition:fixed;にしてみたらどうでしょうか？

.header-scroll{
	background-color:rgba(255, 255, 255,0.92 );
	position:absolute; // ← 削除
	position:fixed; // ← 追加
	top:0;
	left:0;
	padding:5px 0;
	width:100%;
	height:60px;
	z-index:10000;
}

Comments

[shunsaku87]

丁寧にありがとうございます。
すみません、初歩的なことでした。
解決しました。ありがとうございます。