JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<a href="http://stackoverflow.com/questions/5750056/using-jquery-to-add-a-class-of-active-to-navigation-items-when-the-corresponding">Fiddle for http://stackoverflow.com/questions/5750056/using-jquery-to-add-a-class-of-active-to-navigation-items-when-the-corresponding</a>

<div id="site-nav">

<div class="wrap">

    <ul id="nav-links">

        <li class="section-title-nav top">
            <h4><a href="#jag-home" class="section-link scroll">Home</a></h4>
        </li>

        <li class="section-title-nav skills">
            <h4><a href="#background-section" class="section-link scroll">Background</a></h4>
        </li>

        <li class="section-title-nav projects">
            <h4><a href="#projects-section" class="section-link scroll">Projects</a></h4>
        </li>

        <li class="section-title-nav blog">
            <h4><a href="http://blog.joelglovier.com" class="section-link">Blog</a></h4>
        </li>

        <li class="section-title-nav random">
            <h4><a href="#random-section" class="section-link scroll">Random</a></h4>
        </li>

        <li class="section-title-nav credits">
            <h4><a href="#credits-section" class="section-link scroll">Credits</a></h4>
        </li>

    </ul>

    </div>
</div>
    
<div id="jag-home" class="main-section wrap clearfix ">

    <h2 class="section-title"><span class="bg">Top</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">Top</h2>

</div>

<br />
<br />
<div id="projects-section" class="main-section wrap clearfix">

    <h2 class="section-title"><span class="bg">Projects</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">Projects</h2>

</div>
    
<br />
<br />
    
<div id="random-section" class="main-section wrap clearfix">

    <h2 class="section-title"><span class="bg">Random</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">COMING SOON</h2>

</div>

<br/>
<br/>
    
<div...

CSS

#site-nav{
    height: 150px;
    border: solid 1px #666;
    background-color: #aaa;
    position: fixed;
}

.main-section{
    height: 800px;
    border: solid 1px #666;
    background-color: #777;
}

.section-link{
    color: #444;
}
.active{
    color: #0f0;
    background-color: #000;
}

JavaScript

(function highlightNav() {
    var prev; //keep track of previous selected link
    var isVisible= function(el){
        el = $(el);
        
        if(!el || el.length === 0){
            return false
        };

        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        
        var elemTop = el.offset().top;
        var elemBottom = elemTop + el.height();
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }
        

    
    //trigger the scroll handler to highlight on page load
    $(window).scroll();
})();