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>
`;
}