30:T4d6,viewof options = { const opts = { transition: { label: 'Transition duration', input: {type: 'range', min: 0, max: 500, step: 5, value: 25}, output: v => `${v} ms`, }, offset: { label: 'Top offset', input: {type: 'range', min: 0, max: 300, step: 50, value: 0}, output: v => `${v} px`, }, ease: { label: 'Transition timing', input: DOM.select(['ease-in', 'ease-out', 'ease-in-out', 'ease', 'linear']), output: () => '', }, }; const value = {}; const view = html`

${Object.entries(opts).map(([k,{label,input,output}]) => { const i = input instanceof Element ? input : DOM.element('input', {id: DOM.uid().id, ...input}), o = html``; (i.oninput = () => { o.value = output(i.value) })(); Object.defineProperty(value, k, {get: () => i.valueAsNumber !== undefined ? i.valueAsNumber : i.value, enumerable: true}); return html`

${label}:

${i} ${o}`; })}`; return view.value = value, view; }31:[] 2e:{"title":"Sticky Positioning","cells":[{"id":0,"value":"# Sticky Positioning\n\nA notebook iframe's viewport spans the entire document height, with no means to access the parent (i.e., actual) viewport dimensions.\nThis notebook abuses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to accurately determine the real viewport dimensions.\n\nThe implementation repeatedly observes and unobserves the `` element to get a fresh `intersectionRect`. The rect is accurate as long as the notebook iframe spans beyond the upper or lower boundary of the viewport.\n\n*Discussion: https://talk.observablehq.com/t/sticky-sidebar-in-cell/2268*","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"md`---\n## Demonstration\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"options","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"{\n const sidebar = html`

A sticky sidebar

It has some content to stretch its height.`;\n const container = html`

${sidebar}`;\n const unstick = makeSticky(container, sidebar, options);\n invalidation.then(unstick);\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`\nNow that you've seen the default values in action, try experimenting with different parameters. E.g., adjust the sliders to:\n\\`\\`\\`javascript\n { transition: 250, offset: 300 }\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`---\n## API\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"function makeSticky(context, element, {transition = 75, offset = 0, ease = 'ease-in'} = {}) {\n element.style.position = 'absolute';\n element.style.transition = `top ${transition}ms ${ease}`;\n \n return observeViewport((top, bottom) => {\n const rc = context.getBoundingClientRect();\n const rs = element.getBoundingClientRect();\n element.style.top = clamp(0, rc.height - rs.height, top - rc.top + offset) + 'px';\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"function observeViewport(callback) {\n let top = -1, bottom = -1, raf;\n const observer = new IntersectionObserver(([e]) => {\n const t = e.intersectionRect.top;\n const b = e.intersectionRect.bottom;\n if(t !== top || b !== bottom) {\n top = t;\n bottom = b;\n callback(top, bottom);\n }\n observer.unobserve(target);\n raf = requestAnimationFrame(observe);\n });\n const target = document.documentElement;\n const observe = () => observer.observe(target);\n observe();\n \n // Disconnect callback.\n return () => {\n cancelAnimationFrame(raf);\n observer.disconnect();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"function clamp(a, b, v) {\n return v < a ? a : v > b ? b : v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"html`