JSFiddle - React, Tailwind, and code Playground

by gugahoi

HTML

<a href="#one" class="hash">One</a> 
<div>
    <p>some text</p>
</div>
<a href="#two" class="hash">Two</a> 
<div>
    <p>some text</p>
</div>
<a href="#three" class="hash">Three</a> 
<div>
    <p>some text</p>
</div>

CSS

div {
    height: 400px;
}

JavaScript

$(function () {
    var currentHash = "#one"
    $(document).scroll(function () {
        $('.hash').each(function () {
            var top = window.pageYOffset;
            var distance = top - $(this).offset().top;
            var hash = $(this).attr('href');

            if (distance < 30 && distance > -30 && currentHash != hash) {
                alert(hash);
                currentHash = hash;
            }
        });
    });
});