JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
            <!-- Static navbar -->
        <div class="header">
            Header
        </div>
            <nav class="navbar navbar-default" id="nav-bar">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Project name</a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <div class="nav-container">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                                <li><a href="#">Contact</a></li>
                                <li><a href="#">Contact</a></li>
                                <li><a href="#">Contact</a></li>
                                <li><a href="#">Contact</a></li>
                                <li><a...

CSS

#nav-bar{
    height: 45px;
    background: #0d3349;
    color: white;
    width: 100%;
}

.sticky{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    border-top:0;
    width: 100%;
}

.navbar-collapse{
    background-color: #ddd;
    height: 100%
}

.nav-container{
    max-height: 667px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    white-space: nowrap;

}

JavaScript

(function(){
    var that = this;
    var navOffset, nav;

    that.init = function() {
        nav = jQuery('#nav-bar');
        if(!nav)
            return;
        navOffset = nav.offset().top;

        jQuery(window).scroll(that.addStickyMenu);
        jQuery(window).resize(that.addStickyMenu);

    };

    that.addStickyMenu = function() {
        var scrollTop = jQuery(window).scrollTop();
        if(scrollTop > navOffset){
            nav.addClass('sticky');
        } else {
            nav.removeClass('sticky');
        }
    };

    jQuery(document).ready(function(){
        that.init();
    });
})();