ヘッダーが、下スクロールで消えて、上スクロールで出てくるようにしたい

前提・実現したいこと

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

https://webdesignday.jp/inspiration/technique/jquery-js/3657/
こちらのサイトを参考にして書いてみたのですが、ヘッダーが固定されたままでした。
何がおかしいのかご指摘をお願いします。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>aaa</title>
6  <link rel="stylesheet" href="css/aaa.css">
7  <script type="text/javascript" src="js/header.js"></script>
8</head>
9	
10<body>
11  <header class="site-header">
12   	<div class="header-left">
13	  <a href="toppage.html">
14        <img class="logo" src= "image/color_黒抜き.png"  alt="">
15	  </a>
16    </div>
17    <div class="header-right">
18      <a href="business.html">bbb</a>
19      <a href="strength.html">ccc</a>
20      <a href="pastwork.html">ddd</a>
21      <a href="president.html">eee</a>
22      <a href="contact.html">fff</a>
23    </div>
24  </header>
25
26  <div class="main">
27  </div>
28
29  <footer>
30  </footer>
31	
32  </body>
33</html>

css
1.site-header{
2	height:70px;
3	width:100%;
4	background-color:#000000;
5	color:#FFF;
6	position:fixed;
7	z-index: 10;
8	top:0;
9	transition: .5s;
10}
11
12.site-header.hide{
13    transform: translateY(-100%);
14}

javascript
1var startPos = 0,winScrollTop = 0;
2$(window).on('scroll',function(){
3    winScrollTop = $(this).scrollTop();
4    if (winScrollTop >= startPos) {
5        if(winScrollTop >= 200){
6            $('.site-header').addClass('hide');
7        }
8    } else {
9        $('.site-header').removeClass('hide');
10    }
11    startPos = winScrollTop;
12});

行動規範の内容に同意します

回答2件

ベストアンサー

参考サイトには記載されていないようですが、jQueryの読み込みをしていないのが原因ではないでしょうか。
質問に提示のJavaScriptがヘッダーで読み込んでいるheader.jsであれば、それを</body>の直前に移動、さらにその上にjQueryを読み込む記述をしてみてください。

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- お好きなCDNでOK -->
2<script type="text/javascript" src="js/header.js"></script>
3</body>
4</html>