script内のエラーについて

実現したいこと

現在htmlとcssの学習をしているのですが、
jsで固定ナビゲーションをしたいと考えております。

発生している問題

htmlコード内の下記のjsの１行目でエラーになってしまいます。
var navPosition = jQuery( '#nav_menu' ).offset().top;

エラー内容
Uncaught ReferenceError: jQuery is not defined

該当のソースコード

html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="css/reset.css">
    <meta name="description" content="テキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
     <div class="container">
      <header id="header">
        <div class="header_inner">
          <h1 class="header_logo">タイトル</h1> 
        </div>
        <div id="nav_menu">
          <nav class="nav_ber">
            <ul class="nav_list">
              <li class="nav_item"><a href="">ナビ</a></li>
              <li class="nav_item"><a href="">ナビ</a></li>
              <li class="nav_item"><a href="">ナビ</a></li>
              <li class="nav_item"><a href="">ナビ</a></li>
              <li class="nav_item"><a href="">ナビ</a></li>
            </ul>
          </nav>          
        </div>
      </header>
      <main>
        <div class="mainvisual">
          <img src="./img/mainvisual.jpg" alt="画像配置">
        </div>
        <section class="section">
          <h2 class="section_title">タイトル１</h2>
        </section>
        <section class="section">
          <h2 class="section_title">タイトル2</h2>
        </section>
        <section class="section">
          <h2 class="section_title">タイトル3</h2>
        </section>
        <section class="section">
          <h2 class="section_title">タイトル4</h2>
        </section>
        <section class="section">
          <h2 class="section_title">タイトル5</h2>
        </section>
      </main>
    </div>
    <script>
      var navPosition = jQuery( '#nav_menu' ).offset().top; //←ここです
      var navHeight = jQuery( '#nav_menu' ).outerHeight();       jQuery( window ).on('scroll',function(){
        if( jQuery(this).scrollTop() > navPosition){
        jQuery('body').css( 'padding-top' , navHeight );
        jQuery( '#nav_menu' ).addClass( 'nav_fixed' );
        }else{
          jQuery( 'body' ).css( 'padding-top', 0 );
          jQuery( '#nav_menu' ).removeClass( 'nav_fixed' );
        }
      });
    </script>
  </body>
</html>

css
@charset "UTF-8";
/*ページ全体*/
body{
  background-color: #ffffff;
  color: #121212;
}
.container{
  max-width: 1940px;
  margin: 0 auto;
}
/*ヘッダー部分*/
#header{
  height: 212px;
}
#header .header_inner{
  max-width: 750px;
  height: 100px;
  background-color: lightslategray;
  background-color: #fac8c8;
  color: #ffffff;
  color: #121212;
  position: relative;
  margin: 0 auto;
}
/*ロゴテキスト*/
#header .header_logo{
  font-size: 32px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

/*ナビゲーションエリア*/
#header #nav_menu{
  background-color: #e4a8a8;
  color: #121212;
  font-size: 10pt;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
}
#nav_menu .nav_fixed{
  left: 0;
	position: fixed;
	top: 0;
}
.nav_ber .nav_list{ 
  height: 84px;
  text-align: center;
  justify-content: center;
}
.nav_ber .nav_list .nav_item{
  display: inline-block;
  padding: 35px 0;
}
.nav_ber .nav_list .nav_item::before{
  color: rgb(163, 163, 163);
  content: "/";
  margin-left: 15px;
  margin-right: 15px;
}
.nav_ber .nav_list .nav_item:first-child::before {
  content: none;
}
.mainvisual{
  margin-bottom: 60px;
}
.mainvisual img{
  width: 100%;
}

.section{
  height: 600px;
  border-bottom: 1px solid red;
  margin-bottom: 60px;
}
.section_title{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 34px;
  color: silver;
  text-align: center;
}