[jQuery] 스크롤에 반응하는 탭 메뉴 만들기

💌 스크롤에 반응하여 활성화 되는 탭 메뉴

$(window).scroll(function(){
	// 현재 스크롤의 높이값
	var scroll = $(window).scrollTop();
    
    // 내용의 높이값
    var de_item1 = $('#de_item1').offset().top;
    var de_item1_end = de_item1 + $('#de_item1').outerHeight();
    
    // 스크롤의 높이가 내용의 높이값의 끝보다 작으면 탭 활성화
    if (scroll < de_item1_end) {
		$('.de_tab .item').removeClass("active");
		$('#de_tab1').addClass("active"); }
});

💌 탭 클릭시 해당 메뉴로 자동 스크롤

// 탭 클릭시 활성화 + 이동
$("#de_tab1").click(function(){
	$('.de_tab .item').removeClass("active");
	$(this).addClass("active");
    
    // 컨텐츠의 스크롤 위치값을 알아오기
    var offset = $('#de_item1').offset();
    $('html, body').animate({scrollTop : offset.top}, 0);
});

제이쿼리 offset() 함수를 이용하여 최대한 쉽게 구현할 수 있게 해보았습니다 😀