JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<ul><li><a href="#a">a</a></li>
    <li><a href="#b">b</a></li>
    <li><a href="#c">c</a></li>
</ul>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS

html, body {height:100%; min-height:100%; margin:0;}
div {height:100%; text-align:center; font-size:50px; background:pink; margin:0px; opacity:0.3;}
div.inview {opacity:1}
ul {display:block; position:fixed; top:0;}
a.inview {background-color:red}

JavaScript

function testInView($el){
    var wTop = $(window).scrollTop();
    var wBot = wTop + $(window).height();
    var wMid = wBot - ($(window).height()/2);
    var eTop = $el.offset().top;
    var eBot = eTop + $el.height();
    return (((eTop <= wMid) && (eBot >= wMid)));
}
function setInView(){
    $(".inview").removeClass("inview");
    $("div").each(function(){
        var $zis = $(this);
        if(testInView($zis)){
           $zis.addClass("inview");           $("a[href='#"+$zis.attr("id")+"']").addClass("inview");
        }
    });
}
$(document).scroll(function(){
    setInView();
});
$(document).resize(function(){
    setInView();
});
$(document).ready(function(){
    setInView();
});