JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

HTML

<p id="para1">
    <a href="#" name="para91">Anchor<a>
    some long text 
</p> 
<p id="para2">
    <a href="#" name="para92">Anchor<a>
    some text 
</p>
<p id="para3">
    <a href="#" name="para93">Anchor<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();
        $('a[name^="para"]').each(function(){
            var ThisOffset = $(this).closest('p').offset();
            if(Wscroll > ThisOffset.top &&  Wscroll < ThisOffset.top  + $(this).closest('p').outerHeight(true)){
                $(this).closest('p').css('background','red');
                console.log($(this).attr('id')); // will return undefined if this anchor not has an Id
                // to get parent <p> id
                console.log($(this).closest('p').attr('id')); // will return the parent <p> id
            }
        });
    });
});