スクロールでナビゲーションにclass付与。
eq(i) : マッチしている要素をインデックス番号でフィルタリング。(マイナスで一番最後の要素から数える)
attr() : 指定した属性に値を設定、または設定されている値を取得。
charAt() : 文字列内から、.length() – 1の位置の文字を返す。
parent() : 親要素を取得する。
var navCurrent = function(){
var navAnchor = $('.ul-nav li a'),
target,
targetTop,
targetBottom;
var targetArr = new Array();
for (var i = 0; i < navAnchor.length; i++){
target = navAnchor.eq(i).attr('href');
if(target.charAt(0) == '#') {
targetTop = $(target).offset().top – 40;
targetBottom = targetTop + $(target).outerHeight(true);
targetArr[i] = [targetTop, targetBottom]
}
};
$(window).on("load resize scroll", function() {
var windowScrolltop = $(window).scrollTop();
if(windowScrolltop < targetArr[0][0]){
navAnchor.eq(0).parent().addClass('li-current');
}
for (var i = 0; i < targetArr.length; i++) {
if(targetArr[i][0] <= windowScrolltop && targetArr[i][1] >= windowScrolltop) {
navAnchor.parent().removeClass('li-current');
navAnchor.eq(i).parent().addClass('li-current');
i == targetArr.length;
}
};
});
};
navのlist内の各アンカーリンクとマッチする要素を取得してtargetにする。
各targetとなる要素のy軸の始点と終点を取得して配列targetArrに代入。
ウィンドウのスクロールトップを取得して、その値が始点と終点の間にあるtargetの場合、マッチするアンカーリンクにclassを付与。(今回はその親のli要素に「li-current」を付与)
https://www.tam-tam.co.jp/tipsnote/javascript/post4996.html