Support » Plugin: Easy Table of Contents » “Sticky” Table of Contents (TOC) Widget)

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Steven

    (@shazahm1hotmailcom)

    sorry, no not at this time.

    Hi @steven,

    can we make a sticky easy toc?

    /* 1. Enable smooth scrolling */
    html {
    scroll-behavior: smooth;
    }

    /* 2. Make nav sticky */
    main > nav {
    position: sticky;
    top: 2rem;
    align-self: start;
    }

    /* 3. ScrollSpy active styles (see JS tab for activation) */
    .section-nav li.active > a {
    color: #333;
    font-weight: 500;
    }

    /* Sidebar Navigation */
    .section-nav {
    padding-left: 0;
    border-left: 1px solid #efefef;
    }

    .section-nav a {
    text-decoration: none;
    display: block;
    padding: .125rem 0;
    color: #ccc;
    transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
    }

    .section-nav a:hover,
    .section-nav a:focus {
    color: #666;
    }

    /** Poor man’s reset **/
    * {
    box-sizing: border-box;
    }

    html, body {
    background: #fff;
    }

    body {
    font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif;
    }

    ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    li {
    margin-left: 1rem;
    }

    h1 {
    font-weight: 300;
    }

    /** page layout **/
    main {
    display: grid;
    grid-template-columns: 1fr 15em;
    max-width: 100em;
    width: 90%;
    margin: 0 auto;
    }

    /** enlarge the sections for this demo, so that we have a long scrollable page **/
    section {
    padding-bottom: 20rem;
    }

    window.addEventListener(‘DOMContentLoaded’, () => {

    const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
    const id = entry.target.getAttribute(‘id’);
    if (entry.intersectionRatio > 0) {
    document.querySelector(nav li a[href="#${id}"]).parentElement.classList.add(‘active’);
    } else {
    document.querySelector(nav li a[href="#${id}"]).parentElement.classList.remove(‘active’);
    }
    });
    });

    // Track all sections that have an id applied
    document.querySelectorAll(‘section[id]’).forEach((section) => {
    observer.observe(section);
    });

    });

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.