2c:null 2d:["$","title",null,{"children":"Intersection Observer Tutorial #2: Nav | Gabriel Gianordoli | Observable"}] 32:T71e,sections = (exampleName, length) => { return Array.apply(null, { length }) .map((n, i) => { return html`

Section ${i}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare sodales dolor, convallis sollicitudin nulla euismod in. Donec lorem tellus, sodales at elit a, viverra ornare lorem. Vestibulum fermentum purus interdum dignissim facilisis. Sed vel dictum lorem, quis semper ligula. Ut ut libero ac erat accumsan imperdiet et quis metus. Aenean ultricies elit ipsum, nec condimentum metus tempor in. Etiam a egestas velit, vitae consequat felis. Sed eget ipsum sagittis, euismod odio ut, ullamcorper eros. Aliquam erat volutpat. Nam nulla metus, malesuada eu massa ac, consectetur malesuada orci. Sed ligula enim, luctus vitae dolor vitae, commodo blandit diam. Donec dictum purus dolor, vitae mattis dui iaculis vitae. Suspendisse potenti.

Pellentesque ligula neque, egestas interdum efficitur eget, sagittis id nunc. Vivamus ut ipsum nisl. Suspendisse lectus lorem, semper mattis dapibus consequat, placerat at diam. Praesent ut nisl magna. Nulla lacinia massa sed felis tristique, eu tincidunt ipsum iaculis. Cras fringilla lectus ante, vitae luctus erat consectetur ac. Duis consectetur dolor in lacinia facilisis. Sed id congue nibh. Donec ac felis elementum turpis lacinia gravida sit amet ut augue. Ut non pharetra est, eget pretium est. Etiam pharetra est non dui pretium sollicitudin. Etiam lorem nunc, sollicitudin nec lobortis quis, semper eu purus. Proin semper faucibus lorem quis dignissim. Cras sit amet nibh vulputate, convallis ante vehicula, suscipit dui. Donec sollicitudin arcu urna, vel posuere ligula viverra eu.

` }) }33:T453,basicStyles = () => html` `34:[] 30:{"id":"fa9dba45c1937460","slug":"intersection-observer-tutorial-nav","title":"Intersection Observer Tutorial #2: Nav","thumbnail":"61b535e76081a89b2d2a505542ffed5eac2022d978081240444b302e1c80e547","access_level":"public","create_time":"$D2021-03-24T17:55:57.410Z","update_time":"$D2021-03-30T19:52:08.993Z","view_time":null,"first_public_time":"$D2021-03-24T21:32:51.309Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"9db89550eb5ae0fc","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":"starter_2024","bio":""},"version":334,"publish_version":334,"role":null,"authored":false,"authors":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null,"bio":""}],"members":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Intersection Observer Tutorial #2: Nav","cells":[{"id":0,"value":"md`\n# Intersection Observer Tutorial #2: Nav\n\nIn this notebook we will use intersection observer to build a nav element that updates based on the section the user is in. As in [this example](https://observablehq.com/@gianordoli/intersection-observer-tutorial-scrolling-slides), we will mostly see how the \\`rootMargin\\` affects how the IO works.\n\n*Note: if you’re looking for a basic introduction to Intersection Observer, take a look at [this notebook](https://observablehq.com/@gianordoli/intersection-observer-tutorial).\nOther posts in this series are:* \n* [Intersection Observer Tutorial #1: Scrolling Slides](https://observablehq.com/@gianordoli/intersection-observer-tutorial-scrolling-slides)\n* [Intersection Observer Tutorial #3: State](https://observablehq.com/@gianordoli/intersection-observer-tutorial-3-state)\n\n## Example\n\nThe frame below shows more or less what we are trying to do. Scroll to see the changes on the nav.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"example1 = html `\n${basicStyles()}\n\n\n\n${markup('example-1')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof debug = Toggle({label: \"debug\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md `Each section has a \\`data-index\\` attribute that “links” it to its corresponding nav. If you inspect the markup you will see that I’m simply numbering both from 0 to \\`nSections\\` and then using that on the \\`toggleNav\\` function. You could tweak that function to compare \\`id\\`’s, for instance.\n\nThe gist of it is that when a section is in the observed area, the corresponding nav element should get an \\`active\\` class.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"rootMarginExample1 = \"0px 0px -20% 0px\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"setupObserver = (root, rootMargin) => {\n\n const sectionEls = [...root.querySelectorAll('.section')];\n const navEls = [...root.querySelectorAll('.nav > a')]; \n function observerCallback(entries, observer) {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const { index } = entry.target.dataset;\n toggleNav(navEls, index);\n }\n })\n }\n \n const options = {\n root,\n rootMargin,\n };\n const observer = new IntersectionObserver(observerCallback, options);\n \n sectionEls.forEach(el => observer.observe(el));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"toggleNav = (navEls, index) => {\n navEls.forEach((el, i) => {\n if (i === parseInt(index)) {\n el.classList.add('active');\n console.log(i);\n } else {\n el.classList.remove('active'); \n }\n }); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"setupObserver(example1.querySelector('.frame'), rootMarginExample1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md `Similarly to what happened on [this other example](https://observablehq.com/@gianordoli/intersection-observer-tutorial-scrolling-slides), the issue here is that we sometimes have more than one section inside our observed area. If you try scrolling down and then back up you will notice that the nav changes seem to fail.\n\nTake a look into the entries being logged in your console as you scroll them in and out of the observer. Like explained on the previous example, the observer won’t keep track of entries that remained inside of it. It just cares about an entry leaving or entering its area.\n\nUnlike we did in the previous example, we can’t just space the sections out. That would create an undesired white space between them.\n\n*Note: there is probably a more complicated solution to this problem that involves adding thresholds to the observed elements and then comparing intesection ratios when a given element leaves or enters.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md `## The Solution\n\nLike before, the solution is to allow for just one element at a time inside the observed area. We can’t space out the sections, but we can make the \\`rootMargin\\` area really narrow. More precisely, we can make it just 1px-tall.\n\nThe function below will return a pixel-based rootMargin based on:\n* **frame height** — here we’re using \\`500\\`, which is the height of our observableHQ frame. You could just do \\`window.innerHeight\\` in a real-page, full-viewport use.\n* **margin bottom** — a string defining the margin bottom in percentage, with a negative number meaning an inwards margin — following the same convention as the IO options.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"generate1pxRootMargin = (frameHeight, bottomPerc) => {\n let bottom = frameHeight * parseFloat(bottomPerc.slice(0, bottomPerc.indexOf('%'))) * 0.01;\n return `${-(frameHeight + bottom)}px 0px ${(bottom + 1)}px 0px`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"rootMarginExample2 = generate1pxRootMargin(500, '-50%')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md `You can tweak the second parameter of the function invocation above to see how it changes the \\`rootMargin\\` placement.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"example2 = html `\n${basicStyles()}\n\n\n${markup('example-2')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"bind(Toggle({label: \"debug\", value: false}), viewof debug)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md `**Note:** one drawback in this approach is that you will need to recompute the \\`rootMargin\\` on window resize, as its values are pixel-based, and also setup the observer again. So, a \\`reset\\` function could look like:\n* loop through elements and [unobserve](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve) them;\n* recompute the margins;\n* call the \\`setupObserver\\` function again;\n\nWe wouldn’t need to go all through all that trouble if IO’s \\`rootMargin\\` parameter accepted \\`calc()\\` 🤷🏻‍♀️.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"setupObserver(example2.querySelector('.frame'), rootMarginExample2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md `### Styles and Markup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function markup(exampleName) {\n return html`

\n ${sections(exampleName, nSections)}\n

\n ${nav(exampleName, nSections)}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"nSections = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"nav = (exampleName, length) => {\n return Array.apply(null, { length })\n .map((n, i) => {\n const id = `#${exampleName}-section-${i}`;\n return html` {\n const el = document.querySelector(id);\n el.parentNode.scrollTop = el.offsetTop;\n }}\n >\n Section ${i}\n `\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md `### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"import {Toggle, Range, bind, html} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"import {ioDebuggerStyle} from '@gianordoli/intersection-observer-tutorial-scrolling-slides'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"html`\n

Notebook’s Inline Styles

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"