💡 로드 된 스크롤 위치에서 메뉴 활성화

    function navOn() {
      	// 1. 현재 scrollTop() 값을 가져오기 위해 변수에 넣는다.
        var nowTop = $(window).scrollTop();
		
      	// 2. 각 섹션의 offset().top 값을 가져온다.
      	// 2-1. 고정된 header가 있는 경우 header의 높이 만큼 뺀다.
        var sec1_offset = $('#sec1').offset().top - 120;
        var sec2_offset = $('#sec2').offset().top - 120;
        var sec3_offset = $('#sec3').offset().top - 120;
        var sec4_offset = $('#sec4').offset().top - 120;

        // console.log( 'nowTop' + nowTop);
        // console.log( 'sec1_offset' + sec1_offset);

      	// 3. class를 초기화 시킨다.
        $('#gnb > li').removeClass('on');
      
       	// 4. 현재 scrollTop()의 값이 각 섹션의 범위에 있으면 class를 추가한다.
        if ( nowTop >=  0 && nowTop < sec2_offset) {
            $('#gnb > li').eq(0).addClass('on');
        } else if( nowTop >=  sec2_offset && nowTop < sec3_offset ) {
            $('#gnb > li').eq(2).addClass('on');
        } else if( nowTop >=  sec3_offset && nowTop < sec4_offset ) {
            $('#gnb > li').eq(3).addClass('on');
        } else if( nowTop >=  sec4_offset  ) {
            $('#gnb > li').eq(5).addClass('on');
        }
    };
    navOn();

    // 4. scroll function을 넣어 scroll을 트리거로 이벤트를 발생시킨다.
    $(window).scroll(function() {
        navOn();
    });

body의 경우 scroll 값을 반환하지 못하므로 $(window).scrollTop(); 를 쓴다.

💡 GNB 메뉴 클릭 시 해당 섹션으로 이동

    window.goSec = function(n) {
      
      	//sec1 일 때
        if( n == 1) {
            $('html, body').stop().animate({
                scrollTop: 0
            }, 400);
          
          //sec1이 아닐 때
        } else {
            $('html, body').stop().animate({
              	// 해당 섹션의 offset().top 을 받아와서 scroll을 이동시킴
                scrollTop: $('#sec' + n).offset().top - 60
            }, 400);
        }

animation queue

jQuery에서 animate()함수로 애니메이션을 구현 할 때 이 전 애니메이션이 멈추기 전 까지 다음 애니메이션이 동작하지 않는 현상을 애니메이션 큐(animation queue) 문제라고 한다.
이 현상을 해결하기 위해 .stop() 함수를 사용하여, 현재 동작하고 있는 애니메이션을 즉시 중지시키게 한다.