Skip to content

Instantly share code, notes, and snippets.

@ruter

ruter/notion-fixed-toc.js

Created July 14, 2020 05:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ruter/1af53ef31ca649eae0906212ae9e28f4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ruter/1af53ef31ca649eae0906212ae9e28f4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ruter created this gist Jul 14, 2020.
    50 changes: 50 additions & 0 deletions notion-fixed-toc.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    // ==UserScript==
    // @name Notion Fixed TOC
    // @name:zh-CN Notion 浮动 TOC
    // @namespace https://notion.cx/
    // @version 0.2.0
    // @description Make Notion TOC Fixed.
    // @description:zh-cn 让 Notion 的 TOC 浮动显示。
    // @author Ruter Lü
    // @match https://www.notion.so/*
    // @grant none
    // ==/UserScript==

    (function() {
    'use strict';

    /* Helper function to wait for the element ready */
    const waitFor = (...selectors) => new Promise(resolve => {
    const delay = 500;
    const f = () => {
    const elements = selectors.map(selector => document.querySelector(selector));
    if (elements.every(element => element != null)) {
    resolve(elements);
    } else {
    setTimeout(f, delay);
    }
    }
    f();
    });
    /* Helper function to wait for the element ready */

    let callback = function(mutations) {
    waitFor('.notion-table_of_contents-block').then(([el]) => {
    const toc = document.querySelector('.notion-table_of_contents-block');
    if (toc) {
    const toc_p = toc.parentElement;
    if (!toc_p.classList.contains('notion-column-block')) {
    return;
    }
    toc_p.style.position = 'sticky';
    toc_p.style.top = '0';
    toc_p.style.overflowY = 'scroll';
    toc_p.style.maxHeight = '50vh';
    }
    });
    };
    const observer = new MutationObserver(callback);
    let notionApp = document.getElementById('notion-app');
    const config = { childList: true, subtree: true };
    observer.observe(notionApp, config);
    })();