stanwmusic/active-table-of-contents.markdown

## active-table-of-contents.markdown

      
    Raw
  

              active-table-of-contents.markdown
            
          
    Active Table of Contents

Table of contents currently browsing section highlighting using IntersectionObserver.
A Pen by Stan Williams on CodePen.
License.

  
## index.html
<body>
    <nav>
    <ul>
      <li><a id="some-main-title-link" href="#some-main-title">Some Main Title</a></li>
      <ul>
        <li><a id="subheading-1-link" href="#subheading-1">Subheading 1</a></li>
        <li><a id="subheading-2-link" href="#subheading-2">Subheading 2</a></li>
        <li><a id="subheading-3-link" href="#subheading-3">Subheading 3</a></li>
        <li><a id="subheading-4-link" href="#subheading-4">Subheading 4</a></li>
      </ul
    </ul>
  </nav>
  <main>
    <h1 id="some-main-title">Some Main Title</h1>
    <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
    <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
    <h2 id="subheading-1">Subheading 1</h2>
    <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
    <h2 id="subheading-2">Subheading 2</h2>
    <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
    <h2 id="subheading-3">Subheading 3</h2>
    <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
    <h2 id="subheading-4">Subheading 4</h2>
    <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
    <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
    <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
  </main>
</body>

## script.js
let observed = [
  '#some-main-title',
  '#subheading-1',
  '#subheading-2',
  '#subheading-3',
  '#subheading-4',
];

let lastHighlight;

let headingsShown = [];

const start = () => {
  let options = {
    root: document.querySelector('main'),
    rootMargin: '36px',
    threshold: 1.0
  };
  const observer = new IntersectionObserver(function(entries) {
      lastHighlight = headingsShown.indexOf(true)
      entries.forEach((entry) => {
        const index = observed.indexOf('#' + entry.target.id)
        headingsShown[index] = entry.isIntersecting
      });
      let shown = null;
      observed.forEach((id,index) => {
        const link = document.querySelector(id + '-link')
        if (headingsShown[index] && !shown) {
          shown = id;
          link.classList.add('active')
        } else {
           link.classList.remove('active')
        }
      });
      if (!shown) {
        const link = document.querySelector(observed[lastHighlight] + '-link')
        link.classList.add('active')
      }
    }, options)

  for (var i = 0; i < observed.length; i ++) {
    headingsShown[i] = false;
    observer.observe(document.querySelector(observed[i]))
  }
}

start();

## style.css
body {
  display: flex;
  flex-flow: space-between;
  height: 100vh;
  font-family: 'Rubik';
  margin: 0;
  color: #333344;
  line-height: 1.53em;
  font-size: 1.2rem;
}

h1, h2 {
  font-family: 'Rubik Mono One';
  font-weight: 300;
  margin-top: 3rem;
}

main {
  flex: 3 3 100%;
  overflow: auto;
  padding: 2rem 3rem;
}

nav {
  flex: 1 1 300px;
  background-color: #333344;
  min-width: 240px;
}

h1, h2, p {
  max-width: 700px;
}

a {
  color: #eeeeff;
  text-decoration: none;
}

.active {
  color: #ff8888;
  font-weight: bold;
}

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: #eeeeff;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
	<body>
	<nav>
	<ul>
	<li><a id="some-main-title-link" href="#some-main-title">Some Main Title</a></li>
	<ul>
	<li><a id="subheading-1-link" href="#subheading-1">Subheading 1</a></li>
	<li><a id="subheading-2-link" href="#subheading-2">Subheading 2</a></li>
	<li><a id="subheading-3-link" href="#subheading-3">Subheading 3</a></li>
	<li><a id="subheading-4-link" href="#subheading-4">Subheading 4</a></li>
	</ul
	</ul>
	</nav>
	<main>
	<h1 id="some-main-title">Some Main Title</h1>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It
	has roots in a piece of classical Latin literature from 45 BC, making it
	over 2000 years old. Richard McClintock, a Latin professor at
	Hampden-Sydney College in Virginia, looked up one of the more obscure
	Latin words, consectetur, from a Lorem Ipsum passage, and going through
	the cites of the word in classical literature, discovered the
	undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
	of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
	Cicero, written in 45 BC. This book is a treatise on the theory of
	ethics, very popular during the Renaissance. The first line of Lorem
	Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
	1.10.32.
	</p>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It
	has roots in a piece of classical Latin literature from 45 BC, making it
	over 2000 years old. Richard McClintock, a Latin professor at
	Hampden-Sydney College in Virginia, looked up one of the more obscure
	Latin words, consectetur, from a Lorem Ipsum passage, and going through
	the cites of the word in classical literature, discovered the
	undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
	of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
	Cicero, written in 45 BC. This book is a treatise on the theory of
	ethics, very popular during the Renaissance. The first line of Lorem
	Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
	1.10.32.
	</p>
	<h2 id="subheading-1">Subheading 1</h2>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It
	has roots in a piece of classical Latin literature from 45 BC, making it
	over 2000 years old. Richard McClintock, a Latin professor at
	Hampden-Sydney College in Virginia, looked up one of the more obscure
	Latin words, consectetur, from a Lorem Ipsum passage, and going through
	the cites of the word in classical literature, discovered the
	undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
	of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
	Cicero, written in 45 BC. This book is a treatise on the theory of
	ethics, very popular during the Renaissance. The first line of Lorem
	Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
	1.10.32.
	</p>
	<h2 id="subheading-2">Subheading 2</h2>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It
	has roots in a piece of classical Latin literature from 45 BC, making it
	over 2000 years old. Richard McClintock, a Latin professor at
	Hampden-Sydney College in Virginia, looked up one of the more obscure
	Latin words, consectetur, from a Lorem Ipsum passage, and going through
	the cites of the word in classical literature, discovered the
	undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
	of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
	Cicero, written in 45 BC. This book is a treatise on the theory of
	ethics, very popular during the Renaissance. The first line of Lorem
	Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
	1.10.32.
	</p>
	<h2 id="subheading-3">Subheading 3</h2>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It
	has roots in a piece of classical Latin literature from 45 BC, making it
	over 2000 years old. Richard McClintock, a Latin professor at
	Hampden-Sydney College in Virginia, looked up one of the more obscure
	Latin words, consectetur, from a Lorem Ipsum passage, and going through
	the cites of the word in classical literature, discovered the
	undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
	of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
	Cicero, written in 45 BC. This book is a treatise on the theory of
	ethics, very popular during the Renaissance. The first line of Lorem
	Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
	1.10.32.
	</p>
	<h2 id="subheading-4">Subheading 4</h2>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It
	has roots in a piece of classical Latin literature from 45 BC, making it
	over 2000 years old. Richard McClintock, a Latin professor at
	Hampden-Sydney College in Virginia, looked up one of the more obscure
	Latin words, consectetur, from a Lorem Ipsum passage, and going through
	the cites of the word in classical literature, discovered the
	undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
	of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
	Cicero, written in 45 BC. This book is a treatise on the theory of
	ethics, very popular during the Renaissance. The first line of Lorem
	Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
	1.10.32.
	</p>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It
	has roots in a piece of classical Latin literature from 45 BC, making it
	over 2000 years old. Richard McClintock, a Latin professor at
	Hampden-Sydney College in Virginia, looked up one of the more obscure
	Latin words, consectetur, from a Lorem Ipsum passage, and going through
	the cites of the word in classical literature, discovered the
	undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
	of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
	Cicero, written in 45 BC. This book is a treatise on the theory of
	ethics, very popular during the Renaissance. The first line of Lorem
	Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
	1.10.32.
	</p>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It
	has roots in a piece of classical Latin literature from 45 BC, making it
	over 2000 years old. Richard McClintock, a Latin professor at
	Hampden-Sydney College in Virginia, looked up one of the more obscure
	Latin words, consectetur, from a Lorem Ipsum passage, and going through
	the cites of the word in classical literature, discovered the
	undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
	of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
	Cicero, written in 45 BC. This book is a treatise on the theory of
	ethics, very popular during the Renaissance. The first line of Lorem
	Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
	1.10.32.
	</p>
	</main>
	</body>
	let observed = [
	'#some-main-title',
	'#subheading-1',
	'#subheading-2',
	'#subheading-3',
	'#subheading-4',
	];

	let lastHighlight;

	let headingsShown = [];

	const start = () => {
	let options = {
	root: document.querySelector('main'),
	rootMargin: '36px',
	threshold: 1.0
	};
	const observer = new IntersectionObserver(function(entries) {
	lastHighlight = headingsShown.indexOf(true)
	entries.forEach((entry) => {
	const index = observed.indexOf('#' + entry.target.id)
	headingsShown[index] = entry.isIntersecting
	});
	let shown = null;
	observed.forEach((id,index) => {
	const link = document.querySelector(id + '-link')
	if (headingsShown[index] && !shown) {
	shown = id;
	link.classList.add('active')
	} else {
	link.classList.remove('active')
	}
	});
	if (!shown) {
	const link = document.querySelector(observed[lastHighlight] + '-link')
	link.classList.add('active')
	}
	}, options)

	for (var i = 0; i < observed.length; i ++) {
	headingsShown[i] = false;
	observer.observe(document.querySelector(observed[i]))
	}
	}

	start();
	body {
	display: flex;
	flex-flow: space-between;
	height: 100vh;
	font-family: 'Rubik';
	margin: 0;
	color: #333344;
	line-height: 1.53em;
	font-size: 1.2rem;
	}

	h1, h2 {
	font-family: 'Rubik Mono One';
	font-weight: 300;
	margin-top: 3rem;
	}

	main {
	flex: 3 3 100%;
	overflow: auto;
	padding: 2rem 3rem;
	}

	nav {
	flex: 1 1 300px;
	background-color: #333344;
	min-width: 240px;
	}

	h1, h2, p {
	max-width: 700px;
	}

	a {
	color: #eeeeff;
	text-decoration: none;
	}

	.active {
	color: #ff8888;
	font-weight: bold;
	}

	ul {
	list-style: none;
	}

	ul li::before {
	content: "\2022";
	color: #eeeeff;
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	}