[ENG][블로그에]스크롤에 따른 목차 하이라이트 만들기

Overview

목차 표시 설정을 이미 마쳤으며 글을 스크롤하면 해당 제목이 목차에 색이 반영되는 스크립트를 구현할 수 있다.

 

Create Script

하기와 같이 스크립트를 넣어준다. 기존에 이미 목차가 있다고 가정한다. 목차를 만드는 방법은 

https://camelact.tistory.com/67

에서 확인할 수 있다.

 

<script>
$(document).ready(function() {
  $("#toc").toc({
 	  content: ".tt_article_useless_p_margin", 
	  headings: "h2,h3"
  });
});
	
	function checkPosition() {
    var findHeading = $('#content').find('h2,h3,h4');
		var scrollY = window.scrollY + 000;
		if(findHeading.length > 1) {
			for(var i = 0; i < findHeading.length; i++) {
				var findA = $('#toc').find('a');
				if(i < findHeading.length - 1) {
					if(findHeading.eq(i).offset().top < scrollY 
						 && findHeading.eq(i + 1).offset().top > scrollY) {
						findA.removeAttr('style');
						findA.eq(i).css('background-color', '#ccc');
						// findA.eq(i).css('border-left', '5px solid #666');
						break;
					}
				}
				else {
					if(findHeading.eq(i).offset().top < scrollY) {
						findA.removeAttr('style');
						findA.eq(i).css('background-color', '#ccc');
					//	findA.eq(i).css('border-left', '5px solid #666');
						break;
					}
				}
			}
		}
	}

	$(document).ready(function() {
		$(window).on('scroll', function() {
			checkPosition();
		});
	});
</script>

 

findA.eq(i).css... 부분에 기존에 사용하던 자신의 CSS 값을 넣으면 된다.