script内のエラーについて

実現したいこと

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

発生している問題

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

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

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>title</title>
6    <link rel="stylesheet" href="css/reset.css">
7    <meta name="description" content="テキストテキスト">
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9    <link rel="stylesheet" href="css/style.css">
10  </head>
11  <body>
12     <div class="container">
13      <header id="header">
14        <div class="header_inner">
15          <h1 class="header_logo">タイトル</h1> 
16        </div>
17        <div id="nav_menu">
18          <nav class="nav_ber">
19            <ul class="nav_list">
20              <li class="nav_item"><a href="">ナビ</a></li>
21              <li class="nav_item"><a href="">ナビ</a></li>
22              <li class="nav_item"><a href="">ナビ</a></li>
23              <li class="nav_item"><a href="">ナビ</a></li>
24              <li class="nav_item"><a href="">ナビ</a></li>
25            </ul>
26          </nav>          
27        </div>
28      </header>
29      <main>
30        <div class="mainvisual">
31          <img src="./img/mainvisual.jpg" alt="画像配置">
32        </div>
33        <section class="section">
34          <h2 class="section_title">タイトル１</h2>
35        </section>
36        <section class="section">
37          <h2 class="section_title">タイトル2</h2>
38        </section>
39        <section class="section">
40          <h2 class="section_title">タイトル3</h2>
41        </section>
42        <section class="section">
43          <h2 class="section_title">タイトル4</h2>
44        </section>
45        <section class="section">
46          <h2 class="section_title">タイトル5</h2>
47        </section>
48      </main>
49    </div>
50    <script>
51      var navPosition = jQuery( '#nav_menu' ).offset().top; //←ここです
52      var navHeight = jQuery( '#nav_menu' ).outerHeight();       jQuery( window ).on('scroll',function(){
53        if( jQuery(this).scrollTop() > navPosition){
54        jQuery('body').css( 'padding-top' , navHeight );
55        jQuery( '#nav_menu' ).addClass( 'nav_fixed' );
56        }else{
57          jQuery( 'body' ).css( 'padding-top', 0 );
58          jQuery( '#nav_menu' ).removeClass( 'nav_fixed' );
59        }
60      });
61    </script>
62  </body>
63</html>

css
1@charset "UTF-8";
2/*ページ全体*/
3body{
4  background-color: #ffffff;
5  color: #121212;
6}
7.container{
8  max-width: 1940px;
9  margin: 0 auto;
10}
11/*ヘッダー部分*/
12#header{
13  height: 212px;
14}
15#header .header_inner{
16  max-width: 750px;
17  height: 100px;
18  background-color: lightslategray;
19  background-color: #fac8c8;
20  color: #ffffff;
21  color: #121212;
22  position: relative;
23  margin: 0 auto;
24}
25/*ロゴテキスト*/
26#header .header_logo{
27  font-size: 32px;
28  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
29  position: absolute;
30  top: 50%;
31  left: 50%;
32  transform:translate(-50%,-50%);
33}
34
35/*ナビゲーションエリア*/
36#header #nav_menu{
37  background-color: #e4a8a8;
38  color: #121212;
39  font-size: 10pt;
40  font-family: Arial, Helvetica, sans-serif;
41  width: 100%;
42}
43#nav_menu .nav_fixed{
44  left: 0;
45	position: fixed;
46	top: 0;
47}
48.nav_ber .nav_list{ 
49  height: 84px;
50  text-align: center;
51  justify-content: center;
52}
53.nav_ber .nav_list .nav_item{
54  display: inline-block;
55  padding: 35px 0;
56}
57.nav_ber .nav_list .nav_item::before{
58  color: rgb(163, 163, 163);
59  content: "/";
60  margin-left: 15px;
61  margin-right: 15px;
62}
63.nav_ber .nav_list .nav_item:first-child::before {
64  content: none;
65}
66.mainvisual{
67  margin-bottom: 60px;
68}
69.mainvisual img{
70  width: 100%;
71}
72
73.section{
74  height: 600px;
75  border-bottom: 1px solid red;
76  margin-bottom: 60px;
77}
78.section_title{
79  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
80  font-size: 34px;
81  color: silver;
82  text-align: center;
83}

試したこと

scriptの配置箇所headから変えてみたり空欄が半角全角の間違いやエラーについてネットで調べてみましたが原因がわかりませんでした。

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

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

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

回答2件

ベストアンサー

jQuery本体を読み込むscriptタグが無いからじゃないでしょうか。

html
1<!-- 以下をheadタグ内に追記(googleのCDN) -->
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

投稿2021/12/20 14:01

umau

総合スコア805

ten_soldiers

2021/12/20 14:17

ご回答ありがとうございます。 head内で定義することを忘れていたのですねエラー解消されましたありがとうございます。

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

jQueryを読み込んでないので、未定義です。
読み込みましょう。

投稿2021/12/20 14:01

otn

総合スコア84505

ten_soldiers

2021/12/20 14:16

ご回答ありがとうございます。先にhead内で読み込みを行うのですね。ありがとうございます

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！