ポートフォリオ制作

• 課題：ページ内リンクを使わずにスクロールしたときに、対応するナビゲーションの項目をアクティブにする方法を確認。

解決策

が雑誌に書いてあったのでメモ。

$(function(){
  var set = 100;  //画面の上端からどのくらいの距離に到達したら切り替わるかの数値。0にすると、任意のエリアが画面上部に到達すると切り替わる。
  var boxTop = new Array;
  var current = -1;
  
  //各要素の位置
  $('.box').each(function(i) {
    boxTop[i] = $(this).offset().top;
  });
  //最初の要素にclass="on"をつける
  changeBox(0);
  //スクロールしたときの処理
  $(window).scroll(function(){
    scrollPosition = $(window).scrollTop();
    for(var i = boxTop.length - 1 ; i>= 0; i--){
      if($(window).scrollTop()>boxTop[i] - set){
        changeBox(i);
		break;
      }
    };
  });
  //ナビの処理　カレント時はナビゲーションにクラスを付与する。
  function changeBox(secNum){
    if(secNum != current){
      current = secNum;
	secNum2 = secNum + 1;//HTML順序用
      $('#nav li').removeClass('on');
	$('#nav li:nth-child(' + secNum2 +')').addClass('on');
	
	/*位置によって個別に処理をしたい場合
	if(current == 0){
		//現在地がsection1の場合の処理
	} else if (current == 1){
		//現在地がsection2の場合の処理
	} else if (current == 2){
		//現在地がsection3の場合の処理
	}*/
	}
  };
});

元ネタはこの記事でした。解説つき。

webOpixe「jQueryで長いページの区切り（セクション）ごとに背景を変化させる」

２年以上前だわ。