// JavaScript Document /* ======================== * jquery.navicurrentlamp.js * Version 0 * ======================== */ (function($) { // プラグインメソッド $.fn.navicurrentlamp = function(options) { //start plugin method // オプション項目のデフォルト値を設定 var defaults = { areaClass : 'areaBox', /* 領域のクラス名を指定 */ navWrapClass : 'navilamp', /* ナビゲーション領域のクラス名を指定 */ navItem : 'li', /* ナビゲーション領域のボタン要素名を指定 */ currentClass : 'current', /* ナビゲーション点灯用クラス名を指定 */ autoAdjust : false, adaptiveElement : 'header', manualAdjust : 0 }; // 引数からオプション項目を設定 var settings = $.extend(defaults,options); // 使用する変数を定義 var current = null, autoAdjust, testpos, chkpos; var areaPos = []; /* * イベントハンドラ */ // ロード・リサイズ時 $(window).on("load.ncl resize.ncl orientationchange", (function(){ // 座標確認の呼び出し getAreaPos(); // 座標比較の呼び出し checkPos(); })); // スクロール時 $(window).scroll(function(){ // 座標比較の呼び出し checkPos(); }); /* * ファンクション */ // 要素の座標を取得 function getAreaPos() { // 指定されたクラスを持つ要素の数だけ、要素上端の座標を配列に格納 $('.' + settings.areaClass).each(function(i) { areaPos[i] = $(this).offset().top; console.log( areaPos[i] ); }); } // スクロール量と領域座標の比較 function checkPos() { // 座標誤差の発生をチェック chkpos = $('.' + settings.areaClass).offset().top; console.log ("A "+areaPos[0] +" : C " + chkpos); if( (chkpos - areaPos[0]) !=0) { getAreaPos(); } scrollPos = $(window).scrollTop(); // オートアジャスターがONのとき、ヘッダー要素の高さを返す if(settings.autoAdjust) { autoAdjust = $(settings.adaptiveElement).outerHeight(); } else { autoAdjust = 0; } for (var i = areaPos.length - 1 ; i >= 0; i--) { if ($(window).scrollTop() > (areaPos[i] - autoAdjust - settings.manualAdjust -1) ) { testpos = (areaPos[i] - autoAdjust - settings.manualAdjust -1); currentlySwitching(i); break; } }; } // ボタンのON状態を切り換え function currentlySwitching(sectionNum) { // セクション番号と現在のボタン番号が違う場合は、切り換え処理を行う if (sectionNum != current) { console.info('sectionNumber !+ currentNumber / Change lamp number!!'); // 現在番号の引き継ぎ current = sectionNum; console.log('current Num :' + current); // 切り換える要素の番号を指定 selectNum = sectionNum + 1; console.log('select Num :' + selectNum); // 全てのボタンからcurrentクラスを除外 $('.' + settings.navWrapClass + ' ' + settings.navItem ).removeClass(settings.currentClass); // 現在表示中のセクションに対応するボタンにcurrentクラスを付与 $('.' + settings.navWrapClass + ' ' + settings.navItem + ':nth-child(' + selectNum +')').addClass(settings.currentClass); } }; }; // EOP - End of Plugin })( jQuery );