# Show GN: oopy 노션 블로그: floating table of contents 커스텀 플러그인

> Clean Markdown view of GeekNews topic #19893. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19893](https://news.hada.io/topic?id=19893)
- GeekNews Markdown: [https://news.hada.io/topic/19893.md](https://news.hada.io/topic/19893.md)
- Type: show
- Author: [guseod24](https://news.hada.io/@guseod24)
- Published: 2025-03-23T03:32:54+09:00
- Updated: 2025-03-23T03:32:54+09:00
- Original source: [github.com/roseline124](https://github.com/roseline124/custom-js)
- Points: 4
- Comments: 1

## Topic Body

oopy 노션 블로그에 적용할 수 있는 floating table of contents 입니다.  
  
[특징]  
  
1. notion에서 우측에 뜨는 floating table of contents의 UI와 똑같이 구현했습니다. (hover할 때 뜨는 팝오버 제외)  
2. indicator를 클릭하면 스크롤 이동 / indicator로 현재 위치를 알려줍니다.  
  
[설치 방법]  
  
1. oopy 관리자 페이지 > html 편집 > body에 아래 script 태그 추가 후 저장  
2. <script src="https://roseline124.github.io/custom-js/oopy-custom-table-of-contents.js"></script>  
3. 캐시 삭제 후 강력 새로고침  
  
[oopy의 floating-toc와 다른점]  
  
oopy에서 만든 실험적 기능의 floating-toc도 존재합니다.  
https://www.oopy.io/ko/guides/tips-and-tricks/floating-toc  
  
이 커스텀 플러그인은 우피의 floating-toc와 달리  
1. table of contents 블럭이 없어도 heading을 감지해서 indicator로 표시해줍니다.  
2. page 별로 설정해주지 않아도 heading이 있는 모든 페이지에서 동작합니다.  
3. floating-toc는 heading tag의 텍스트를 모두 보여주지만, 이 플러그인은 콘텐츠 영역을 침범하지 않기 위해 indicator에 hover 시 4~6글자만 노출해서 보여줍니다. (단점)

## Comments



### Comment 36244

- Author: guseod24
- Created: 2025-03-23T23:28:54+09:00
- Points: 1

+ 지금은 노션 popover도 똑같이 재현했습니다!