JSFiddle - React, Tailwind, and code Playground
HTML
<div class="position-sticky" id="sticky_header">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, suscipit temporibus impedit amet tenetur qui sunt perferendis et provident error hic molestiae, ea sit harum cumque ducimus quam omnis voluptate.</p>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio a cumque facilis porro provident itaque fuga fugiat quos architecto! Commodi atque dolor consequatur provident, sunt, accusantium optio impedit unde laboriosam odio, eius eos aspernatur pariatur cum? Fugiat, ea dolor ullam delectus, magnam vitae architecto iste dolore ipsum numquam ratione. Magnam enim mollitia quasi omnis voluptas ullam, vitae illum labore dolores sint quam sapiente voluptatem, nobis excepturi blanditiis accusamus. Voluptatibus nemo laboriosam, architecto beatae sequi ad molestiae magnam aperiam provident ducimus ab illum autem voluptatum, excepturi id esse, qui veritatis sint fugit quam? Facilis vel possimus quasi fuga voluptatibus, quae harum.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio a cumque facilis porro provident itaque fuga fugiat quos architecto! Commodi atque dolor consequatur provident, sunt, accusantium optio impedit unde laboriosam odio, eius eos aspernatur pariatur cum? Fugiat, ea dolor ullam delectus, magnam vitae architecto iste dolore ipsum numquam ratione. Magnam enim mollitia quasi omnis voluptas ullam, vitae illum labore dolores sint quam sapiente voluptatem, nobis excepturi blanditiis accusamus. Voluptatibus nemo laboriosam, architecto beatae sequi ad molestiae magnam aperiam provident ducimus ab illum autem voluptatum, excepturi id esse, qui veritatis sint fugit quam? Facilis vel possimus quasi fuga voluptatibus, quae harum</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio a cumque facilis porro provident itaque fuga fugiat quos architecto! Commodi atque dolor consequatur provident, sunt, accusantium optio impedit...
CSS
.position-sticky {
position: sticky;
top: 0px;
background: black;
color: white;
}
.position-sticky_footer {
top: 18px;
background: green;
}
JavaScript
function calcStickyFooterPos() {
var header = document.getElementById('sticky_header');
var footer = document.getElementById('sticky_footer')
var headerHeight = header.clientHeight;
footer.style.top = headerHeight + 'px';
}
window.addEventListener('resize', calcStickyFooterPos);
calcStickyFooterPos();