JSFiddle - React, Tailwind, and code Playground

HTML

<div id="info">
    <p class="wxh"></p>
    <p class="txl"></p>
    <p class="report"></p>
</div>

<h1>A long list...</h1>
<ul></ul>

CSS

#info{
    position: fixed;
    right: 0px;
    text-align: center;
    background: white;
    border: 2px solid black;
    padding: 10px;
}

h1{
    padding: 10px;
    font-size: 2em;
    font-weight: bold;
}

ul{
    border-top: 1px solid #eee;
}

li{
    padding: 10px;
    border-bottom: 1px dotted #eee;
}

JavaScript

$(function(){
        
        $(window).bind('scroll.measure resize.measure',function(){
            
            // Gather together the window width, height, and scroll position.
            var winWidth = $(window).width(),
                winHeight = $(window).height(),
                winLeft = $(window).scrollLeft(),
                winTop = $(window).scrollTop(),
                winBottom = winTop + winHeight,
                winRight = winLeft + winWidth,
                inView = [];
            
            // Loop over each of the elements you want to check
            $('.inview').each(function(){
                
                // Get the elements position and dimentions.
                var pos = $(this).position(),
                    width = $(this).outerWidth(),
                    height = $(this).outerHeight();
                
                // Set bottom and right dimentions.
                pos.bottom = pos.top + height;
                pos.right = pos.left + width;
                
                // Check whether this element is partially within
                // the window's visible area.
                if((
                    pos.left >= winLeft &&
                    pos.top >= winTop &&
                    pos.right <= winRight &&
                    pos.bottom <= winBottom
                ) || (
                    pos.left >= winLeft && pos.top >= winTop && 
                    pos.left <= winRight && pos.top <= winBottom
                ) || (
                    pos.right <= winRight && pos.bottom <= winBottom &&
                    pos.right >= winLeft && pos.bottom >= winTop
                )){
                    // Change this to push the actual element if you need it.
                    inView.push( $(this).text() );
                }
            });
            
            // For the purposes of this example, we only need the
            // first and last element, but in your application you may need all.
           ...