JSFiddle - React, Tailwind, and code Playground
HTML
<div id='verticallyFixedBox'>
<div id='scroll'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</div>
</div>
<div id='padder'></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</p>
<p>
Nunc non turpis non orci consectetur bibendum eget vitae urna. Nulla dictum, orci sit amet luctus consectetur, nisi nisl rutrum sapien, ut fermentum urna dui a ipsum. Mauris commodo convallis mi, sed ullamcorper enim mollis eget. Maecenas risus felis, lobortis eu interdum elementum, facilisis a justo. Ut semper velit at enim convallis mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis a orci magna. Duis blandit orci ac fermentum auctor. In hac habitasse platea dictumst. Aliquam sit amet molestie felis, et congue purus. Proin porta mauris sed tincidunt ultrices. Curabitur tristique felis ac sodales aliquet.
</p>
<p>
Etiam placerat lorem non sem feugiat, non tristique neque maximus. Maecenas ultrices scelerisque ante, ut bibendum nunc tincidunt maximus. Proin placerat tincidunt quam in scelerisque. Sed nunc tortor, ultricies ut tincidunt eu, molestie id nunc. Nam nisl mauris, scelerisque at pharetra vitae, lacinia vitae sapien. Etiam sollicitudin eget magna ornare eleifend. Praesent molestie quam a mollis accumsan.
</p>
<p>
Nullam gravida, est ac gravida vulputate, nibh quam...
CSS
#verticallyFixedBox {
background: #ccc;
border-bottom: 2px solid #000;
padding: 10px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#scroll {
overflow: scroll;
white-space: nowrap;
}
#padder {
height: 30px;
}
JavaScript
var verticallyFixedBox =
document.getElementById('verticallyFixedBox');
window.addEventListener('scroll', function() {
verticallyFixedBox.style.top =
'' + document.body.scrollTop + 'px';
});