JSFiddle - React, Tailwind, and code Playground
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat urna et nunc congue rhoncus. Donec lacus lectus, ultrices congue egestas sed, pulvinar sed tortor. Donec non scelerisque est, vel interdum metus. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed cursus augue varius mi hendrerit, at tempor justo feugiat. Nam commodo, enim sit amet consequat interdum, lacus velit ullamcorper leo, ac hendrerit arcu massa sit amet nisi. Phasellus vel consequat augue. Donec feugiat sem vel nisl fermentum consectetur. Fusce id iaculis lectus. Vivamus rhoncus, felis id placerat facilisis, est erat imperdiet neque, vel consequat nulla ligula et elit. Etiam dictum commodo aliquam. Quisque posuere blandit mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat urna et nunc congue rhoncus. Donec lacus lectus, ultrices congue egestas sed, pulvinar sed tortor. Donec non scelerisque est, vel interdum metus. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed cursus augue varius mi hendrerit, at tempor justo feugiat. Nam commodo, enim sit amet consequat interdum, lacus velit ullamcorper leo, ac hendrerit arcu massa sit amet nisi. Phasellus vel consequat augue. Donec feugiat sem vel nisl fermentum consectetur. Fusce id iaculis lectus. Vivamus rhoncus, felis id placerat facilisis, est erat imperdiet neque, vel consequat nulla ligula et elit. Etiam dictum commodo aliquam. Quisque posuere blandit mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat urna et nunc congue rhoncus. Donec lacus lectus, ultrices congue egestas sed, pulvinar sed tortor. Donec non scelerisque est, vel interdum metus. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed cursus augue varius mi hendrerit, at tempor justo feugiat. Nam commodo, enim sit amet consequat interdum, lacus velit ullamcorper leo, ac hendrerit arcu massa sit amet nisi. Phasellus...
CSS
#highlight {
position: fixed;
top: 50%;
width: 100%;
background-color: #ccff00;
height: 30px;
z-index: -1;
}
p{
/* margin: 50vh 0; */
font-size: 30px;
line-height: 30px;
}
JavaScript
var highlight = document.querySelector("#highlight");
window.addEventListener('scroll', function(e){
var y = window.scrollY;
var offset = y % 30;
highlight.style.marginTop = - y % 30 + "px";
});