JSFiddle - React, Tailwind, and code Playground

by rasikasampath

HTML

<p > <a name="para1"></a> some long text </p> 
<p > <a name="para2"></a>some text </p>
<p ><a name="para3"></a> some long text </p>

CSS

p{
    height: 500px;
    margin: 20px;
    background : yellow
}

JavaScript

$(document).ready(function(){
    $(window).on('scroll',function(){
        var Wscroll = $(this).scrollTop();
        $('p[id^="para"]').each(function(){
            var ThisOffset = $(this).offset();
            if(Wscroll > ThisOffset.top &&  Wscroll < ThisOffset.top  + $(this).outerHeight(true)){
                $(this).css('background','red');
                console.log($(this).attr('id'));
            }
        });
    });
});