edulan/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky scroll spy example</title>

  <style>
    html {
      scroll-behavior: smooth;
    }

    .section-nav li.active>a {
      color: #333;
      font-weight: 500;
    }

    .section-nav {
      padding-left: 0;
    }

    .section-nav a {
      text-decoration: none;
      display: block;
      padding: .125rem 0;
      color: #ccc;
      transition: color 50ms ease-in-out;
    }

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

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

    html,
    body {
      background: #fff;
      margin: 0;
      padding: 0;
    }

    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 {
      display: inline-block;
      margin-left: 1rem;
    }

    h1 {
      font-weight: 300;
    }

    h2 {
      padding-top: 1rem;
    }

    /** page layout **/
    main {
      max-width: 100em;
      width: 90%;
      margin: 0 auto;
    }

    section {
      height: 50rem;
      margin-bottom: calc(5rem + 1px);
      scroll-margin-top: 5rem;
    }

    .sticky-nav {
      position: sticky;
      top: 0;
      background-color: antiquewhite;
      padding: 2rem;
    }
  </style>
</head>

<body>
  <main>
    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, voluptatem labore vitae temporibus porro
      odit dicta libero soluta officia quae, officiis ipsa impedit in eveniet maiores similique enim doloribus
      voluptates!</h1>
    <nav class="section-nav sticky-nav">
      <ol>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
        <li><a href="#section5">Section 5</a></li>
      </ol>
    </nav>
    <section id="section1">
      <h2>Section 1</h2>
      <p>…</p>
    </section>
    <section id="section2">
      <h2>Section 2</h2>
      <p>…</p>
    </section>
    <section id="section3">
      <h2>Section 3</h2>
      <p>…</p>
    </section>
    <section id="section4">
      <h2>Section 4</h2>
      <p>…</p>
    </section>
    <section id="section5">
      <h2>Section 5</h2>
      <p>…</p>
    </section>
  </main>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const stickyHeight = document.querySelector('.sticky-nav').getBoundingClientRect().height;
      const viewportHeight = window.innerHeight
      const bottomMargin = viewportHeight - stickyHeight

      let options = {
        rootMargin: `0px 0px -${bottomMargin}px 0px`,
      }

      function updateActiveNav(entries) {
        requestIdleCallback(() => {
          entries.forEach(entry => {
            const id = entry.target.getAttribute('id');

            if (entry.isIntersecting) {
              if (!document.querySelector(`nav li a[href="#${id}"]`)) {
                return
              }

              document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
            } else {
              if (!document.querySelector(`nav li a[href="#${id}"]`)) {
                return
              }

              document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
            }
          });
        })
      }

      const observer = new IntersectionObserver(updateActiveNav, options);

      document.querySelectorAll('section[id]').forEach((section) => {
        observer.observe(section);
      });
    });
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sticky scroll spy example</title>

	<style>
	html {
	scroll-behavior: smooth;
	}

	.section-nav li.active>a {
	color: #333;
	font-weight: 500;
	}

	.section-nav {
	padding-left: 0;
	}

	.section-nav a {
	text-decoration: none;
	display: block;
	padding: .125rem 0;
	color: #ccc;
	transition: color 50ms ease-in-out;
	}

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

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

	html,
	body {
	background: #fff;
	margin: 0;
	padding: 0;
	}

	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 {
	display: inline-block;
	margin-left: 1rem;
	}

	h1 {
	font-weight: 300;
	}

	h2 {
	padding-top: 1rem;
	}

	/ page layout /
	main {
	max-width: 100em;
	width: 90%;
	margin: 0 auto;
	}

	section {
	height: 50rem;
	margin-bottom: calc(5rem + 1px);
	scroll-margin-top: 5rem;
	}

	.sticky-nav {
	position: sticky;
	top: 0;
	background-color: antiquewhite;
	padding: 2rem;
	}
	</style>
	</head>

	<body>
	<main>
	<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, voluptatem labore vitae temporibus porro
	odit dicta libero soluta officia quae, officiis ipsa impedit in eveniet maiores similique enim doloribus
	voluptates!</h1>
	<nav class="section-nav sticky-nav">
	<ol>
	<li><a href="#section1">Section 1</a></li>
	<li><a href="#section2">Section 2</a></li>
	<li><a href="#section3">Section 3</a></li>
	<li><a href="#section4">Section 4</a></li>
	<li><a href="#section5">Section 5</a></li>
	</ol>
	</nav>
	<section id="section1">
	<h2>Section 1</h2>
	<p>…</p>
	</section>
	<section id="section2">
	<h2>Section 2</h2>
	<p>…</p>
	</section>
	<section id="section3">
	<h2>Section 3</h2>
	<p>…</p>
	</section>
	<section id="section4">
	<h2>Section 4</h2>
	<p>…</p>
	</section>
	<section id="section5">
	<h2>Section 5</h2>
	<p>…</p>
	</section>
	</main>

	<script>
	window.addEventListener('DOMContentLoaded', () => {
	const stickyHeight = document.querySelector('.sticky-nav').getBoundingClientRect().height;
	const viewportHeight = window.innerHeight
	const bottomMargin = viewportHeight - stickyHeight

	let options = {
	rootMargin: `0px 0px -${bottomMargin}px 0px`,
	}

	function updateActiveNav(entries) {
	requestIdleCallback(() => {
	entries.forEach(entry => {
	const id = entry.target.getAttribute('id');

	if (entry.isIntersecting) {
	if (!document.querySelector(`nav li a[href="#${id}"]`)) {
	return
	}

	document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
	} else {
	if (!document.querySelector(`nav li a[href="#${id}"]`)) {
	return
	}

	document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
	}
	});
	})
	}

	const observer = new IntersectionObserver(updateActiveNav, options);

	document.querySelectorAll('section[id]').forEach((section) => {
	observer.observe(section);
	});
	});
	</script>
	</body>

	</html>