#027 posted on 2017.08.18

スクロールでナビゲーションに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

 

SHARE THIS ON...

- 人気記事 -