JSFiddle - React, Tailwind, and code Playground

HTML

<div class='currentTopDiv'><span class='currentTop'></span><button id='currentPosButton'>Update</button></div>
<div class='lyricpadding'>
    <h4 class='highlighted'>Highlighted</h4>
    <h4>Other</h4>
    <h4>Other</h4>
    <h4>Other</h4>
    <h4>Other</h4>
</div>

CSS

.lyricpadding
{
    height:1000px;
    width:100%;   
    background-color:lightblue;
}
.highlighted
{    
    display:inline-block;
    position:absolute;
}
.currentTopDiv
{    
    position:fixed;    
    right:0px;
}

JavaScript

var theTop = 0;
function positionMiddle()
{
    var $highlighted = $('.highlighted');    
    $highlighted.css({        
        left: ($(window).width() - $highlighted.outerWidth())/2,
        top: $(window).scrollTop() + ($(window).height() - $highlighted.outerHeight())/2
    });
    theTop = $highlighted.css('top');    
}

$(window).resize(function(){
   positionMiddle();
});

$(window).scroll(function(){    
   positionMiddle();
   $('.currentTop').text(theTop); 
});

$('#currentPosButton').click(function(){    
    $('.currentTop').text(theTop);
});

// To initially run the function:
positionMiddle();