JSFiddle - React, Tailwind, and code Playground

HTML

<p1 id="a"><a href="index.html" id="linkNoStyle">TITLE</a></p1>
<p1 id="b">SUBTITLE</p1>

<div id="div">
    <a href="projects.html" id="link">PROJECTS</a>
    &nbsp;
    &nbsp;
    <a href="ideas.html" id="link">IDEAS</a>
    &nbsp;
    &nbsp;
    <a href="contact.html" id="link">CONTACT</a>
</div>

<hr size="5" color=black>

CSS

html {
    height: 3000px;
}
#a{
    font-family:Futura;
    font-size:80pt;
    color:black;
}

#b{
    font-family:Futura;
    color:grey;
}

#div{
    padding-top:3px;
    padding-left:10px;
    font-family:Futura;
    background-color:#ff6600;
    color:white;
    height:25px;
}
#div.fixed {
    position: fixed;
    top: 0;
    left: 10px;
    right: 10px;
}

JavaScript

var timer;
$(window).scroll(function() {
    clearTimeout(timer);
    var $win = $(this);
    var $div = $('#div');
    timer = setTimeout(function() {
        var scrollTop = $win.scrollTop();
        if ($div.offset().top < scrollTop) {
            $div.addClass('fixed');
        }
        else {
            $div.removeClass('fixed');
        }
    }, 100);
});