スクロールに合わせてコンテンツの位置を取得し、ナビゲーションの色を薄くして、かつアンダーラインを入れたいと思っています。
https://www.tam-tam.co.jp/tipsnote/javascript/post4996.html
こちらのサイトを参考にして作成していますが、全く反応もなく、検証ツールでは$(targetContents).offset().top;に取得できないとエラー文が出ています。
どのようにすれば、うまくいくのでしょうか。
js
1$(function(){ 2 var navLink = $('#gnav li a'); 3 4 var contentsArr = new Array(); 5 for (var i = 0; i < navLink.length; i++) { 6 var targetContents = navLink.eq(i).attr('href'); 7if(targetContents.charAt(0) == '#') { 8 var targetContentsTop = $(targetContents).offset().top; 9 var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1; 10 // 配列に格納 11 contentsArr[i] = [targetContentsTop, targetContentsBottom] 12 } 13 }; 14 15 // 現在地をチェックする 16 function currentCheck() { 17 // 現在のスクロール位置を取得 18 var windowScrolltop = $(window).scrollTop(); 19 for (var i = 0; i < contentsArr.length; i++) { 20 // 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる 21 if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) { 22 // 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける 23 navLink.removeClass('current'); 24 navLink.eq(i).addClass('current'); 25 i == contentsArr.length; 26 } 27 }; 28 } 29 30 // ページ読み込み時とスクロール時に、現在地をチェックする 31 $(window).on('load scroll', function() { 32 currentCheck(); 33 }); 34 35 // ナビゲーションをクリックした時のスムーズスクロール 36 navLink.click(function() { 37 $('html,body').animate({ 38 scrollTop: $($(this).attr('href')).offset().top 39 }, 300); 40 return false; 41 }) 42});
HTML
1<ul id="gnav" class="navigation-list"> 2 <li class="list-item"><a href="#top" class="underline side">Home</a></li> 3 <li class="list-item"><a href="#about" class="underline side">About</a></li> 4 <li class="list-item"><a href="#case-studies" class="underline side">Case studies</a></li> 5... 6
css
1#gnav a { 2 text-decoration: none; 3 color: #000000; 4 transition: border-color 0.3s, color 0.3s; 5} 6 7#gnav a .current { 8 color: #1d3d36; 9 opacity: 0.6; 10}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/28 16:51
2018/08/29 01:19
2018/08/30 09:53
2018/08/31 01:31
2018/09/09 23:32