B
const header = document.querySelector('header'),
section = document.querySelector('.elem'),
targetEl = section.querySelector('p'),
topOffset = -header.scrollHeight - targetEl.scrollHeight;
const iobs = new IntersectionObserver(([entry]) => {
targetEl.classList.toggle('is-fixed',
entry.boundingClientRect.top <= header.scrollHeight
);
}, { root: document.body, rootMargin: ${topOffset}px 0px 0px 0px, });
iobs.observe(section);* { box-sizing: border-box; }
html,
body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body { overflow-y: auto; }
header {
position: fixed;
top: 0px; right: 0; left: 0;
background-color: red;
}
header+section { padding-top: 18px; }
.elem { min-height: 1rem; }
.elem p { background-color: yellow; }
.elem p.is-fixed { position: fixed; top: 2px; right: 0; left: 0; }<header>
header
</header>
<section class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam unde possimus incidunt eos nobis modi voluptatibus ea. Architecto doloribus optio molestias quia eum vel sunt, pariatur excepturi quod obcaecati odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minus, vero repudiandae aut suscipit iusto debitis. Hic pariatur id cumque aliquam cupiditate dolorem sit, possimus tempore iusto, deserunt, libero impedit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam unde possimus incidunt eos nobis modi voluptatibus ea. Architecto doloribus optio molestias quia eum vel sunt, pariatur excepturi quod obcaecati odit.</p>
</section>
<section class="elem">
<p>sticky block</p>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minus, vero repudiandae aut suscipit iusto debitis. Hic pariatur id cumque aliquam cupiditate dolorem sit, possimus tempore iusto, deserunt, libero impedit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam unde possimus incidunt eos nobis modi voluptatibus ea. Architecto doloribus optio molestias quia eum vel sunt, pariatur excepturi quod obcaecati odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minus, vero repudiandae aut suscipit iusto debitis. Hic pariatur id cumque aliquam cupiditate dolorem sit, possimus tempore iusto, deserunt, libero impedit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam unde possimus incidunt eos nobis modi voluptatibus ea. Architecto doloribus optio molestias quia eum vel sunt, pariatur excepturi quod obcaecati odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minus, vero repudiandae aut suscipit iusto debitis. Hic pariatur id cumque aliquam cupiditate dolorem sit, possimus tempore iusto, deserunt, libero impedit.</p>