2d:null 2e:["$","title",null,{"children":"Intersection Observer Tutorial #3: State | Gabriel Gianordoli | Observable"}] 33:T472,md ` Now if you scroll through the example you’ll see that our function is not doing what we intended. The background color seems to be added and removed at random. You can try toggling the 1px-margin option (a function we borrowed from [this notebook](https://observablehq.com/@gianordoli/intersection-observer-tutorial-nav)) or changing the margin values to see if that will help, but I think it won’t. The issue here is that sometimes a section will enter the observed area and another one will leave immediately after that, removing our \`in-section\` class from the background. With a larger observed area it is a little easier to see that happening. *Note: one possible solution for this problem is observing the cover and the footer instead, and turning the page white when they are in view. But sometimes you are working on a page (like [this one](https://www.nytimes.com/interactive/2020/06/13/us/george-floyd-protests-cities-photos.html)) where other elements that you don’t have control over get added to the bottom. In that case, when your footer scrolls out the page will turn pink again, which is not what we want.*`34:Ta65,function markup(exampleName) { return html`

${sections(exampleName, nSections)}

` }35:T730,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.

` }); }36:T4be,basicStyles = () => html ` `37:[] 31:{"id":"f60d72ae4ebaa01c","slug":"intersection-observer-tutorial-3-state","title":"Intersection Observer Tutorial #3: State","thumbnail":"01fba5c461dddaad0d8537ee2a50d476a562d0e6309d0c9bc635cff5c156ba7c","access_level":"public","create_time":"$D2021-03-25T16:51:37.676Z","update_time":"$D2021-03-30T20:06:02.369Z","view_time":null,"first_public_time":"$D2021-03-29T21:01:38.257Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"9db89550eb5ae0fc","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":"starter_2024"},"version":213,"publish_version":213,"role":null,"authored":false,"authors":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null}],"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":{"title":"Intersection Observer Tutorial #3: State","cells":[{"id":0,"value":"md `\n# Intersection Observer Tutorial #3: State\n\nIn this example we will check the intersection of multiple elements on the page at once and use that to apply an effect to the page background.\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 #2: Nav](https://observablehq.com/@gianordoli/intersection-observer-tutorial-nav)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md `## Example\n\nImagine a page structure with a cover, a few sections and then a footer at the bottom. We want to make the intersection observer change something on the page — say, its background color — only when the sections are visible. If the reader is on the cover or footer parts instead, the background should stay white.\n\nProbably our first instinct is to set the IO to add a class to the page when a section comes into view and then remove that class when it scrolls out of view, like in the function below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"{\n const root = example1.querySelector('.frame');\n const rootMargin = rootMarginExample1;\n const sectionEls = [...root.querySelectorAll('.section')];\n\n function observerCallback(entries, observer) {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n root.classList.add('in-section');\n } else {\n root.classList.remove('in-section');\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","output":"$undefined","database":"$undefined"},{"id":27,"value":"example1 = html`\n${basicStyles()}\n\n\n${markup('example-1')}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof debug = Toggle({label: \"debug\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof narrowMargin = Toggle({label: \"1px margin\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"rootMarginExample1 = narrowMargin ? generate1pxRootMargin(500, '-50%') : '0px 0px -50% 0px'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md `## The Solution\n\nWhat we need is a way of checking whether *at least one* section is in view. As we discussed [before](https://observablehq.com/@gianordoli/intersection-observer-tutorial-scrolling-slides), there is no way for us to do so via the IO callback, because it is triggered only when an entry enters or leaves the margins. It doesn’t tell us anything about the state of the other observed elements. So the fix is to keep track of that state ourselves.\n\nLet’s map our observed elements into objects, each one containing the actual HTML element and a boolean to track its visibility:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"observables = [...example2.querySelectorAll('.section')]\n .map(el => ({ el, visible: false }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md `Now our intersection observer will simply forward the \\`entry.isIntersecting\\` value to its corresponding “observable” object. We do that by comparing the entry’s \\`target\\` and the object’s \\`el\\` using [isSameNode](https://developer.mozilla.org/en-US/docs/Web/API/Node/isSameNode).\n\n*Note: you could also compare \\`id\\`s in case your sections were named.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"{\n const root = example2.querySelector('.frame');\n const rootMargin = rootMarginExample2;\n\n function observerCallback(entries, observer) {\n entries.forEach(entry => {\n const obj = observables.find(obj => obj.el.isSameNode(entry.target));\n obj.visible = entry.isIntersecting;\n });\n toggleBgClass(root);\n }\n \n const options = {\n root,\n rootMargin,\n };\n const observer = new IntersectionObserver(observerCallback, options);\n \n observables.forEach(obj => observer.observe(obj.el));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`Every time that our callback function is triggered — meaning, any time that a section enters or leaves the observed area, we will check whether we can find at least one section is still in view.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"toggleBgClass = (root) => {\n const inView = observables.find(obj => obj.visible);\n if (inView) {\n root.classList.add('in-section');\n } else {\n root.classList.remove('in-section'); \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"example2 = html`\n${basicStyles()}\n\n\n${markup('example-2')}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"bind(Toggle({label: \"debug\", value: false}), viewof debug)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"bind(Toggle({label: \"1px margin\", value: false}), viewof narrowMargin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"rootMarginExample2 = narrowMargin ? generate1pxRootMargin(500, '-50%') : '0px 0px -50% 0px'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md `### Styles and Markup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"nSections = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md `### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import {Toggle, Range, Button, bind, html} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {ioDebuggerStyle} from '@gianordoli/intersection-observer-tutorial-scrolling-slides'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"import { generate1pxRootMargin } from '@gianordoli/intersection-observer-tutorial-nav'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`\n

Notebook’s Inline Styles

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"