表題の件、同じ質問が別にあり重複して申し訳ございませんが、
うまく実装できず、教えていただけますでしょうか。
下記のjsを現在実装しているのですが、
各section毎に高さが違う場合、ナビゲーションのカレントが中途半端な位置で
切り替わってしまいます。
こちらのソースを拝見すると各sectionにかっちり高さが指定されている上で
成立しているかと思うのですが。。。
https://www.tam-tam.co.jp/tipsnote/javascript/post4996.html
HTML
1 <div id="header"> 2 <div class="inner"> 3 <ul id="gnav"> 4 <li><a href="#contents01" class="current">コンテンツA</a></li> 5 <li><a href="#contents02">コンテンツB</a></li> 6 <li><a href="#contents03">コンテンツC</a></li> 7 <li><a href="#contents04">コンテンツD</a></li> 8 </ul> 9 </div> 10 </div> 11 <div id="contents"> 12 <div class="inner"> 13 <div id="contents01"> 14 <h2>コンテンツA</h2> 15 コンテンツAの領域 16 </div> 17 <div id="contents02"> 18 <h2>コンテンツB</h2> 19 コンテンツBの領域 20 </div> 21 <div id="contents03"> 22 <h2>コンテンツC</h2> 23 コンテンツCの領域 24 </div> 25 <div id="contents04"> 26 <h2>コンテンツD</h2> 27 コンテンツDの領域 28 </div> 29 </div> 30 </div>
css
1@charset "utf-8"; 2* { 3 margin: 0; 4 padding: 0; 5} 6li{ 7 list-style-type: none; 8} 9#page { 10 position: relative; 11 width: 100%; 12} 13.inner { 14 width: 960px; 15 overflow: hidden; 16 margin: 0 auto; 17} 18#header { 19 position: fixed; 20 top: 0; 21 left: 0; 22 z-index: 200; 23 width: 100%; 24 padding: 20px 0; 25 text-align: center; 26 background: #dddddd; 27} 28#header #gnav { 29 float: right; 30} 31#header #gnav li { 32 float: left; 33 padding-left: 20px; 34} 35#header #gnav li a { 36 color: #666666; 37 text-decoration: none; 38} 39#header #gnav li a.current { 40 color: #000000; 41 text-decoration: underline; 42} 43#contents { 44 position: relative; 45 z-index: 100; 46 width: 100%; 47 background: #bbbbbb; 48} 49#contents .inner div { 50 height: 1000px;<!--高さがsection毎に異なる場合にカレントが中途半端な位置で表示される--> 51 padding-top: 70px; 52} 53#contents .inner div:nth-child(even) { 54 background: #777777; 55} 56#contents .inner div:nth-child(odd) { 57 background: #999999; 58}
js
1$(function() { 2 // ナビゲーションのリンクを指定 3 var navLink = $('#header #gnav li a'); 4 5 // 各コンテンツのページ上部からの開始位置と終了位置を配列に格納しておく 6 var contentsArr = new Array(); 7 for (var i = 0; i < navLink.length; i++) { 8 // コンテンツのIDを取得 9 var targetContents = navLink.eq(i).attr('href'); 10 // ページ内リンクでないナビゲーションが含まれている場合は除外する 11 if(targetContents.charAt(0) == '#') { 12 // ページ上部からコンテンツの開始位置までの距離を取得 13 var targetContentsTop = $(targetContents).offset().top; 14 // ページ上部からコンテンツの終了位置までの距離を取得 15 var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1; 16 // 配列に格納 17 contentsArr[i] = [targetContentsTop, targetContentsBottom] 18 } 19 }; 20 21 // 現在地をチェックする 22 function currentCheck() { 23 // 現在のスクロール位置を取得 24 var windowScrolltop = $(window).scrollTop(); 25 for (var i = 0; i < contentsArr.length; i++) { 26 // 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる 27 if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) { 28 // 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける 29 navLink.removeClass('current'); 30 navLink.eq(i).addClass('current'); 31 i == contentsArr.length; 32 } 33 }; 34 } 35 36 // ページ読み込み時とスクロール時に、現在地をチェックする 37 $(window).on('load scroll', function() { 38 currentCheck(); 39 }); 40 41 // ナビゲーションをクリックした時のスムーズスクロール 42 navLink.click(function() { 43 $('html,body').animate({ 44 scrollTop: $($(this).attr('href')).offset().top 45 }, 300); 46 return false; 47 }) 48});
各section毎に高さが違う場合でも
カレントが正しい位置で表示されるようにしたいです!
ご教示お願いいたします!
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。