웹페이지 목차, 스크롤 따라다니게 하기, sticky, floating

 

	개요 - 스크롤 따라다니는 목차
	구현대상 본 글에서는 워드프레스의 글의 목차가 앞부분에 고정되지 않고 사용자가 브라우저 스크롤 해도 차례가 따라 다니도록 구현한다.   필요성 웹사이트에 게시된 1페이지 문서의 길이가 길고, 헤딩 부가된 제목이 여러 개 있는 문서는 차례를 보여주면 매우 유용하다. 통상 문서의 첫 부분에 고정된 차례가 제시 되는 경우가 많으나(아래 그림), 사용자가 웹브라우저를 아래로 스크롤 하면 차례는 보이지 않게된다. 문서 내에서 다른 부분으로 찾아가려면 다시 문서의 상단으로 와서 차례를 보고 찾아가야 한다. 안 좋다.   위 문제를 해결하기 위하여 본 글에서는 차례를 사이드바의 위젯에 배치하고 스크롤을 따라다니게 구현한다. 사용자가 스크롤 해도 차례는 계속 보이므로 문서내의 다른 곳으로 찾아가기 쉬어지고 사용자가 쉽게 정보 접근이 가능하다.

 

 

	구현 - 스크롤 따라다니는 목차.
	스크롤 따라다니는 차례를 2개의 플러그인을 조합하여 구현하는 것으로 간단히 달성된다.   차례 표현하는 플러그인은 'Table of Contents Plus' 이며, 스크롤 따라다니게 하는 것은 Q2W3 Fixed Widget 을 이용한다. 이들 플러그인의 설치법과 기본 사용법은 아래 별도 정리된 정보를 참조한다.   1. Table of Contents Plus 설치와 기본 사용법 : http://igotit.tistory.com/57   2. Q2W3 Fixed Widget 설치와 기본 사용법 : http://igotit.tistory.com/56   아래 내용은 위 2개의플러그인이 설치된 상태에서의 '스크롤 따라다니는 차례' 구현 과정 이다.   구현. 워드프레스 관리자 사이트 좌측메뉴에서 외모 -> 위젯 -> 사이드바에 TOC+위젯을 배치한다. TOC+ 위젯의 설정에 Fixed widget 을 체크하고, 저장하기 버튼 클릭하면 끝.     구현 결과. 위의 셋팅으로 사이트에서 보이는 모습이다. 오른쪽 사이드바 속에서 차례위젯이 배치되고 브라우저 스크롤 해도 차례는 항상 화면에 보이게 된다.  구현된 워드프레스 사이트 보러가기 -> http://igotit.kr/62/

 

 

 

본 글이 포함된 통합 정리 글   WordPress 활용정보 정리 : http://igotit.tistory.com/23

 

 

///58.