JSFiddle - React, Tailwind, and code Playground

HTML

<div class=top-nav>
    <div class=wrapper>
        <nav class=primary>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Shop</a></li>
                <li><a href="">Contact</a></li>
            </ul>               
        </nav>                            
    </div>
</div>
<div class=wrapper>
    <div class=carousel></div>
    <div class=content>
    </div>
</div>

CSS

.top-nav {position:static;width:100%;margin:0 auto;background:url(../images/elements/egg_shell.png) top left repeat;}
.wrapper{width:960px;margin:0 auto;overflow:hidden;}
.wrapper .brand{text-align:center;width:100%;display:block;}
.wrapper .primary{ padding:38px 0 28px 0;display:inline-block; background:red; width:100% }
.wrapper .primary li{display:inline;margin:0 22px 0 0;text-tra nsform:uppercase;font-size:16px;}
.wrapper .primary li:last-child{margin:0 0 0 0;}
.wrapper .primary li a{color:#000000;text-decoration:none;}
.wrapper .primary li a:hover, .wrapper .primary li a.active{color:#f15112;}
.carousel { height:611px; background:green; margin-top:50px; }
.content { height:400px; background:yellow; }

JavaScript

var interval_id = false;
var curOffset, oldOffset;
var altmenu;

$(document).ready(function(){
altmenu = $('.top-nav')[0].cloneNode(true);
altmenu.style.position = 'absolute';
altmenu.style.display = 'none';
document.body.appendChild(altmenu);
oldOffset = $(window).scrollTop();
$(document).bind('scroll',function(){
    if (interval_id) {
        return;
    }
    altmenu.style.display = 'none';
    interval_id = setInterval(function() {
        curOffset = $(window).scrollTop();
        if(curOffset == oldOffset) {
            console.log('scrolling stopped',curOffset);
            clearInterval(interval_id);
            interval_id = false;
            if (curOffset>120) {
                altmenu.style.display = 'block';
            } else {
                altmenu.style.display = 'none';
            }
            $(altmenu).css({
                top: (curOffset-120)+'px'
            }).animate({
                top: (curOffset)+'px'
            }, 500);
        }
        oldOffset = curOffset;
    }, 500); //setInterval
});//scroll
});//ready