※.is-currentに下線の装飾コードを書いておく。(CSSファイルにて)
※「位置によって個別に処理したい場合」の.is-current を付与する場所に#~ を指定しているが、これだとid属性「〜」を持つセクションに.is-current を付与する形になる気が・・・
・js
// ある要素までスクロールするとナビバーに下線が引かれる(カレント)
jQuery(function () {
var set = 110;//ウインドウ上部からどれぐらいの位置で変化させるか
var boxTop = new Array;
var current = -1;
// 画面幅が640px以下での、ウィンドウ上部からの変化位置調整
if (outerWidth > 640) {
set = 110;
} else {
set = 300;
};
//各要素の位置
//js-position-nowは場所を取得したい対象の要素に付ける。sectionタグのクラスにつけると良いかも。
jQuery('.js-position-now').each(function (i) {
boxTop[i] = jQuery(this).offset().top;
});
//最初の要素にclass="js-positiion-now"をつける
changeBox(0);
//スクロールした時の処理
jQuery(window).scroll(function () {
scrollPosition = jQuery(window).scrollTop();
for (var i = boxTop.length - 1; i >= 0; i--) {
if (jQuery(window).scrollTop() > boxTop[i] - set) {
changeBox(i);
break;
}
};
});
//ナビの処理
function changeBox(secNum) {
if (secNum != current) {
current = secNum;
secNum2 = secNum + 1;//以下にクラス付与したい要素名と付与したいクラス名
jQuery('.p-header__nav-items li a').removeClass('is-current');
//位置によって個別に処理をしたい場合
if (current == 0) {
jQuery('.p-header__nav-items li a').removeClass('is-current');
// 現在地がsection1の場合の処理
} else if (current == 1) {
jQuery('#js-card').addClass('is-current');
// 現在地がsection2の場合の処理
} else if (current == 2) {
jQuery('#js-news').addClass('is-current');
// 現在地がsection3の場合の処理
} else if (current == 3) {
jQuery('#js-price').addClass('is-current');
// 現在地がsection4の場合の処理
} else if (current == 4) {
jQuery('#js-access').addClass('is-current');
// 現在地がsection5の場合の処理
} else if (current == 5) {
jQuery('#js-qa').addClass('is-current');
// 現在地がsection6の場合の処理
} else if (current == 6) {
jQuery('#js-contact').addClass('is-current');
}
}
};
});