Q&A
ご返信ありがとうございます。
HTML追加しました。
jqueryの学習の為上記のソースコードのエラーの解決策を提示して頂けると、助かります。
前提・実現したいこと
縦長ページのヘッダーメニューの項目を現在地によって点灯させたいのですが動きません。
発生している問題・エラーメッセージ
Cannot read property 'top' of undefined at script.js:17 at dispatch (jquery.min.js:2) at v.handle (jquery.min.js:2)
クロームの検証機能です。
該当のソースコード
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <link rel="stylesheet" href="style.css"> 7 <title>Portfolio</title> 8 9 10 <!-- jQuery --> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 12 <script src="script.js"></script> 13 <!-- jQuery --> 14 15 <!-- font --> 16 <link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet"> 17 <link href="https://fonts.googleapis.com/css?family=Abel&display=swap" rel="stylesheet"> 18 <link href="https://fonts.googleapis.com/css?family=Holtwood+One+SC&display=swap" rel="stylesheet"> 19 <!-- font --> 20 21 <!-- font awesome --> 22 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> 23 <!-- font awesome --> 24 25 <!-- Animate.css --> 26 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> 27 <!-- Animate.css --> 28 <!-- AOSアニメーション --> 29 <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> 30 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 31 <!-- AOSアニメーション --> 32 33</head> 34 35<body> 36<!-- header --> 37<div class="header"> 38 <ul> 39 <li class="current"><a href="#sec1">Top</a></li> 40 <li><a href="#sec2">About Me</a></li> 41 <li><a href="#sec3">Web Design</a></li> 42 <li><a href="#sec4">Golf Lesson</a></li> 43 <li><a href="#sec5">Contact</a></li> 44 </ul> 45</div> 46<!-- header --> 47<!-- top --> 48<section> 49<div id="sec1" class="top"> 50 <div class="title"> 51 <h1>Hello World!</h1> 52 </div> 53</div> 54</section> 55<!-- top --> 56<!-- aboutme --> 57<section> 58<div class="about"> 59 <div id="sec2" class="aboutme"> 60 <h1>About me</h1> 61 </div> 62 <div class="image"> 63 <img src="profile-image1.png"> 64 </div> 65 <div class="contents"> 66 <div class="subtitle"> 67 <h2>伴 大樹</h2> 68 <h2>(ばん ひろき)</h2> 69 </div> 70 <div class="sentences"> 71 <p>1992年 東京都生まれ</p> 72 <p>ゴルフをしながら、WEB制作もしているプロエンジニアゴルファー。</p> 73 <p>プロゴルファーとして活動する一方で、プログラミングの楽しさに気付き、第一歩としてWEB制作の勉強を開始。</p> 74 <p>現在はプロゴルファーとして活動しつつ、WEB制作と修正を中心に案件を受注している。</p> 75 </div> 76 </div> 77</div> 78</section> 79<!-- aboutme --> 80<!-- webdesign --> 81<section> 82<div class="web"> 83 <div id="sec3" class="title"> 84 <h1>Web Design</h1> 85 </div> 86 <div class="group"> 87 <div class="subtitle"> 88 <h2>Creation</h2> 89 </div> 90 <div class="image"> 91 <img src="survice-image011.jpg"> 92 </div> 93 <div class="contents"> 94 <p>個人で公開するホームページから会社・法人向けのコーポレートサイトやランディングページまでご要望に沿ったWEB制作を承ります。</p> 95 <p>お客様にご満足頂けるサービスを提供する為に、最初のヒアリングにて詳細なご希望をお伺いし、その上で完成イメージを共有し、進捗度合いを密にご報告しつつ制作に取り掛かります。</p> 96 <p>納品後の修正にも対応し、最後まで丁寧な対応を心掛けています。</p> 97 </div> 98 </div> 99 <div class="group"> 100 <div class="subtitle"> 101 <h2>Correction</h2> 102 </div> 103 <div class="image"> 104 <img src="survice-image021.jpg"> 105 </div> 106 <div class="contents"> 107 <p>近年のWEB業界は目まぐるしく環境変化しており、時代に適応し続ける為にはWEBサイトを定期的に見直す必要があります。</p> 108 <p>パソコン・タブレット・スマートフォンそれぞれのディスプレイサイズに合わせて、最適なレイアウトを表示するレスポンシブ化や、お客様ご自身でコンテンツを更新出来るWordPressへの適応化などの修正案件も承ります。</p> 109 <p>小さな修正でも受け付けますので、まずはお気軽にご相談ください。</p> 110 </div> 111 </div> 112</div> 113</section> 114<!-- webdesign --> 115 116<!-- golf Lesson --> 117<section> 118<div class="golf"> 119 <div id="sec4" class="title"> 120 <h1>Golf Lesson</h1> 121 </div> 122 <div class="group"> 123 <div class="subtitle"> 124 <h2>At Range</h2> 125 </div> 126 <div class="image"> 127 <img src="survice-image031.jpg"> 128 </div> 129 <div class="contents"> 130 <p>ゴルフ練習場にて打撃レッスンを行います。初心者、これから始める方大歓迎、お一人様での受付可能です。</p> 131 <p>お客様によって身体つきや感覚が異なりますので、良くあるプロのスイングを見本にした型に嵌めた指導は行いません。</p> 132 <p>実際の球筋やミスの傾向を考慮した上で、問題点を解決出来る可能性のある打ち方を複数ご提案し、心地よく打てるスイングを一緒に探していきます。</p> 133 </div> 134 </div> 135 <div class="group"> 136 <div class="subtitle"> 137 <h2>At Course</h2> 138 </div> 139 <div class="image"> 140 <img src="survice-image041.jpg"> 141 </div> 142 <div class="contents"> 143 <p>ゴルフ場でのラウンドレッスンもお一人様から承ります。練習場では教えることが難しいショートゲーム・パッティングのみのレッスンも可能です。</p> 144 <p>コースを回る際は打ち方の指導はもちろん、現在の技量、環境でもベストスコアを出す為の考え方をご指導致します。</p> 145 <p>練習場では出来てもコースでは上手くいかない、、、なんてこともあると思いますので、そういったご相談もお聞かせ下さい。</p> 146 </div> 147 </div> 148</div> 149</section> 150<!-- golf --> 151 152<!-- contact --> 153<section> 154<div class="contact"> 155 <div id="sec5" class="title"> 156 <h1>Contact</h1> 157 </div> 158 <form action="form.php" method="post" class="contactform"> 159 <div class="name"> 160 <p>名前</p> 161 <input type="text" name="name" required> 162 </div> 163 <div class="mail"> 164 <p>メールアドレス</p> 165 <input type="email" name="email" required> 166 </div> 167 <div class="subject"> 168 <p>件名</p> 169 <input type="text" name="subject" required> 170 </div> 171 <div class="message"> 172 <p>お問い合わせ内容</p> 173 <textarea name="message" required></textarea> 174 </div> 175 <div class="send"> 176 <button>送信</button> 177 </div> 178 </form> 179</div> 180</section> 181<!-- contact --> 182 183<!-- copyright --> 184 <small>© 2019 Hiroki Ban</small> 185<!-- copyright --> 186 187<!-- AOSアニメーション --> 188<script> 189 AOS.init(); 190</script> 191<!-- AOSアニメーション --> 192</body> 193</html> 194
jQuery
1$(function(){ 2 $(window).scroll(function(){ 3 4 for(var i = 1; i <= 5; i++){ 5 6 if($("section:nth-child(" + i + ")").offset().top < $(window).scrollTop()){ 7 8 $(".header ul li").removeClass("current"); 9 $(".header ul li:nth-child(" + i + ")").addClass("current"); 10 } 11 } 12 }); 13});
試したこと
シングルクォーテーションに置き換え
.offset().topを.get( 0 ).offsetTopに置き換え
(" + i + ")を(i)に置き換え
補足情報（FW/ツールのバージョンなど）
if($("section:nth-child(" + i + ")").offset().top < $(window).scrollTop()){
ここがat script.js:17の該当箇所です。
クロームの検証機能で
.top < $(window).scrollTop()){
に下線が引いてあってエラーが出ています。
使用CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>jQuery標準デザイン講座という本のlesson26を少し変更しただけです。
回答2件
0
ベストアンサー
セレクタ "section:nth-child(" + i + ")" に該当する要素がない場合、 .offset() が undefined を返し、.top プロパティがないためエラーになります。
HTML がないので状況がはっきりしませんが、section の前に何か要素を追加してしまったのではないでしょうか？
投稿2019/12/16 05:24
総合スコア13749
0
currentクラスの文字を点滅するのでしょうか？
cssで処理すれば良いと思います
jQueryでやるならanimateとかですかね
投稿2019/12/16 03:56
総合スコア116661
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/17 01:02
2019/12/17 01:17
2019/12/17 05:36