JSFiddle - React, Tailwind, and code Playground

HTML

<h1>heading</h1>
<p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error odio repellat recusandae illum ut consequuntur nostrum praesentium ullam ratione facilis qui repellendus hic esse placeat beatae rerum blanditiis modi eius.</span>
    <span>Rem eaque sequi ullam illo ea libero molestiae voluptatem dignissimos ex fugit voluptate facere commodi illum fugiat earum. Labore recusandae dolore nisi saepe voluptatem aliquam earum laborum tempora optio corporis.</span>
    <span>Et accusantium porro quibusdam doloremque praesentium sequi repellat. Harum quae laudantium fugit doloremque veniam minima pariatur deleniti repudiandae perferendis et dolor numquam qui quia aperiam sapiente repellendus sunt eos perspiciatis.</span>
    <span>Ex eius fuga hic quibusdam obcaecati molestiae deserunt. Aliquid mollitia repellendus quas vel veritatis adipisci animi laboriosam voluptate. Minima ab architecto molestiae explicabo tempora? Enim officia blanditiis architecto dolorem esse.</span>
    <span>Sapiente ea beatae ipsam eaque tempora suscipit omnis commodi inventore molestiae laboriosam! Eveniet consequatur adipisci dolores eos laboriosam laudantium eaque alias saepe perspiciatis facilis illo laborum autem temporibus beatae nam.</span>
</p>

<div class="special">
    SPECIAL
</div>

<p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt doloribus error rerum quas obcaecati provident nam. In aspernatur deserunt molestiae odit placeat saepe dolores accusantium inventore explicabo repellat maiores!</span>
    <span>Tempora ullam eos nisi laborum modi dignissimos perspiciatis. Dicta laudantium vel cupiditate velit aliquid. Beatae vitae accusantium dicta corrupti illum non corporis sit autem delectus libero. Ipsum quia temporibus iure.</span>
    <span>Laboriosam architecto beatae debitis dolore impedit dolorem necessitatibus tenetur odio quo corrupti laudantium fugit voluptates cupiditate. Facilis rerum in similique repellat...

CSS

body {
    font-size: 50px;
}

.status {
    font-size: 15px;
    padding: 10px;
    width: 90px;
    position: fixed;
    right: 0;
    height: 50px;
    text-align: center;
    line-height: 50px;
    top: 0;
    border: 1px solid;
}

JavaScript

function isElementInViewport (el) {
    var rect = el[0].getBoundingClientRect();
    return (rect.top>-1 && rect.bottom <= $(window).height());
}
var s= $('.special'),
    y = $('.status');

$(window).on('scroll resize', function(){
    console.log(3);
    if(isElementInViewport(s)) y.text('Yes');
    else y.text('No');
});