Published unlisted
Edited
Aug 16, 2019
1 star
Insert cell
md`# Sticky Sidebar`
Insert cell
element = {
const h = 4;
const num = 100;
const thresholds = Array.from({length: num}).map((_,i) => {
const thresh = html`<div style="flex: 1;">`;
thresh.i = i;
return thresh;
});
const content = html`<div style="flex: 1; background: red; height: ${h*num}px; display: flex; flex-direction: column;">
${thresholds}
</div>`;
const sidebar = html`<div style="flex: 1; /* position: sticky; */ right: 0; top: 0;">
Sidebar
</div>`;

let state = Array(num).fill(false);
function callback(entries, observer) {
entries.forEach((entry) => {
state[entry.target.i] = entry.isIntersecting;
});
const top = state.indexOf(true);
if (top >= 0 && top < num- 7) {
sidebar.style.transform = `translate(0, ${h*(top+1)}px)`;
}
}

const observer = new IntersectionObserver(callback);
for (const t of thresholds) {
observer.observe(t);
}
invalidation.then(() => observer.disconnect());
return html`
<div style="display:flex;">
${content}
${sidebar}
</div>
`;
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more