###前提・実現したいこと
実現したいこと:
・上下スクロール時に複数設定したsectionのトリガー到達時に合致するサイドメニューを切り替える。
・対象コンテンツを過ぎたらサイドメニューは隠す。
前提:
・フル画面ページではない。
・sectionは縦並びで9個、うちサイドメニュー対象は上部5個。
・スクロールを戻すとサイドメニューの内容も戻る。
・サイドメニューはz-indexなどで重ねsectionと合致する内容のみ表示する。
・レスポンシブ対応(※スマホ・タブレット時はサイドメニューは非表示)
・サイドメニューは上部固定。
近い動作をするサイト
http://springsummer.dk/
###発生している問題
トリガー前にサイドメニューが切り替わる、もしくはトリガーを超えてから切り替わってしまう。
サイドメニュー対象外のエリアに入ってもサイドメニューが消えない。
###該当のソースコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> <script> $(function() { // 引き金となる要素を設定 var triggerNode = $(".trigger"); // 画面スクロール毎に判定を行う $(window).scroll(function(){ // 引き金となる要素の位置を取得 var triggerNodePosition = $(triggerNode).offset().top - $(window).height(); // 現在のスクロール位置が引き金要素の位置より下にあれば‥ if ($(window).scrollTop() > triggerNodePosition) { // なんらかの命令を実行 $('#sidenav').addClass('on'); } }); }); $(function(){ var margin = -250, sectionTop = new Array, current = -1; $('.trigger').each(function(i) { sectionTop[i] = $(this).offset().top; }); $('#sidenav').append('<div id="#current"></div>'); //create #current changeNavCurrent(0); $(window).scroll(function(){ scrollY = $(window).scrollTop(); for (var i = sectionTop.length - 1 ; i >= 0; i--) { if (scrollY > sectionTop[i] - margin) { changeNavCurrent(i); break; } }; }); //ナビの処理 function changeNavCurrent(curNum) { if (curNum != current) { current = curNum; curNum2 = curNum + 1; $('#sidenav li').removeClass('on'); $('#sidenav li:nth-child(' + curNum2 +')').addClass('on'); /* 位置によって個別に処理をしたい場合 if (current == 0) { // 現在地がsection1の場合の処理 } else if (current == 1) { // 現在地がsection2の場合の処理 } else if (current == 2) { // 現在地がsection3の場合の処理 }*/ } }; }); $(function(){ $(window).scroll(function(){ var obj_t_pos = $('#moreContents').offset().top; var scr_count = $(document).scrollTop() + (window.innerHeight/2); // ディスプレイの半分の高さを追加 if(scr_count > obj_t_pos){ $('#sidenav').addClass('cle'); }else{ $('#sidenav').removeClass('cle'); } }) }); </script> </head> <body> <div id="Contents"> <div id="Main"> <div id="mainContents"> <div class="trigger" id="section01"> 内容1:スライダー(bxslider) </div> <div class="trigger" id="section02"> 内容2 </div> <div class="trigger" id="section03"> 内容3 </div> <div class="trigger" id="section04"> 内容4 </div> <div class="trigger" id="section05"> 内容5 </div> </div> <div id="moreContents"> <div class="otherContents" id="sub01"> 内容6 </div> <div class="otherContents" id="sub02"> 内容7 </div> <div class="otherContents" id="sub03"> 内容8 </div> <div class="otherContents" id="sub04"> 内容9 </div> </div> <ul id="sidenav"> <li><a href="#section01">内容1タイトル</a></li> <li><a href="#section02">内容2タイトル</a></li> <li><a href="#section03">内容3タイトル</a></li> <li><a href="#section04">内容4タイトル</a></li> <li><a href="#section05">内容5タイトル</a></li> </ul> </div> </div> </body> </html>
###試したこと
ソースの書き換え、他のプラグインの使用など
複数ブラウザでの動作確認(IE、Firefox、Chrome)
初めまして、Webページを作成していて、どうしても解決できないのでお力添えをいただければと思います。
プラグインや、ネットに掲載されているソースをほんの少し触る程度の実力です。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/21 06:09