JSFiddle - React, Tailwind, and code Playground

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum congue nibh, vitae tempor sem mattis ut. Nunc ac lacus eu elit fringilla congue nec non neque. Praesent eu metus neque, congue ornare ligula. Donec lacus ante, auctor et dignissim in, condimentum ac sapien. Sed interdum, urna ultrices varius tincidunt, eros eros interdum lectus, ut porttitor turpis metus sed nulla. Duis ac malesuada nisi. Ut facilisis massa eget urna facilisis quis auctor orci volutpat. Aliquam sit amet metus dolor, sit amet vestibulum sem. Nunc laoreet, nisl sit amet elementum aliquam, mauris sapien feugiat erat, vel porta nisi metus ut sapien. In hac habitasse platea dictumst. Integer accumsan tincidunt lorem eget lobortis. Nulla aliquam fermentum purus, in semper dui condimentum nec. In turpis nulla, consequat vitae cursus sed, varius suscipit magna. Cras tortor justo, tempor ac tempor non, euismod nec dui.</p>
<br/>
<p>Phasellus ultrices augue eget lacus ultrices ut auctor turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget purus et nisl aliquet varius. In et felis elit. Nulla sit amet dui ac dolor suscipit hendrerit. Suspendisse potenti. Ut a massa a massa luctus condimentum ut et magna. In hac habitasse platea dictumst. Vestibulum purus metus, tristique eu sodales eu, sagittis ut ante. Sed malesuada viverra erat, id facilisis nunc dignissim tristique. Pellentesque et nisi sapien. Aliquam commodo semper magna in ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae urna diam. Morbi a enim eget nibh vestibulum condimentum id eu lectus. Aenean nec augue laoreet nisi condimentum viverra eget quis quam.</p>
<br/>
<p>Suspendisse potenti. Nulla facilisi. Praesent rutrum, lectus in pulvinar aliquam, mauris tellus congue lorem, vitae commodo arcu turpis in arcu. Fusce interdum, dolor a tincidunt cursus, dui odio consequat lectus, eget dapibus tortor sapien eu quam. Maecenas aliquet volutpat diam, sed porta...

CSS

div#interesting {
    position: fixed;
    top: 0;
    left: 50%;
    background-color: OrangeRed;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px;
}

span#interesting {
    color: Red;
    padding: 40px;
}

JavaScript

// Add a div to contain a copy of the interesting text
var interestingOffscreen = $('<div/>')
    .attr('id', 'interesting')
    .text($("span#interesting").text());

$('body').prepend(interestingOffscreen);

// Center the display of that copy
interestingOffscreen.css(
    'margin-left',
    -(interestingOffscreen.outerWidth() / 2)
);

// Detect when it is offscreen/onscreen and react    
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var isNotVisibleHandler; // forward declaration

function isVisibleHandler()
{
    if(isScrolledIntoView($("span#interesting")))
    {
        $(window).unbind('scroll');
        interestingOffscreen.fadeOut(
            function() {
                $(window).scroll(isNotVisibleHandler);
                $(window).scroll(); // force detection
            }
        );
    }
}

isNotVisibleHandler = function()
{
    if(!isScrolledIntoView($("span#interesting")))
    {
        $(window).unbind('scroll');
        interestingOffscreen.fadeIn(
            function() {
                $(window).scroll(isVisibleHandler);
                $(window).scroll(); // force detection
            }
        );
    }
};

$(window).scroll(isVisibleHandler);