JSFiddle - React, Tailwind, and code Playground

by chintansoni

HTML

<table id="alarmTable">
    <tr>
        <td>Note</td>
    </tr>
    <tr>
        <td>how</td>
    </tr>
    <tr>
        <td>the</td>
    </tr>
    <tr>
        <td>elements</td>
    </tr>
    <tr>
        <td>become</td>
    </tr>
    <tr>
        <td>red</td>
    </tr>
    <tr>
        <td>once</td>
    </tr>
    <tr>
        <td>they</td>
    </tr>
    <tr>
        <td>are</td>
    </tr>
    <tr>
        <td>fully</td>
    </tr>
    <tr>
        <td>visible</td>
    </tr>
    <tr>
        <td>in</td>
    </tr>
    <tr>
        <td>viewport</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>..................</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hello</td>
    </tr>
</table>

JavaScript

// for showing howmany rows are displayed and how much are below screem
$(window).on('scroll resize', function() {

    var top    = $(this).scrollTop(),
        height = $(this).height();
    
    
    var visible = $('#alarmTable tr').filter(function() {
        var elTop    = $(this).offset().top,
            elHeight = $(this).height();
        
        return (elTop > top) && ((elTop + elHeight) < (top + height));
    });
    
    $('#alarmTable tr').css('color','black');
    visible.css('color', 'red');

}).trigger('scroll');